import type { DsIcon } from '@bonniernews/dn-design-system-web/types-lib/ds-icon.d.ts'

export interface ButtonSharedProps {
  /** Design variant */
  variant?: 'primary' | 'primaryBlack' | 'secondaryFilled' | 'secondaryOutline' | 'transparent' | 'staticWhite'
  /** Note: only works on button-tag, not on a-tag */
  text?: string
  disabled?: boolean
  /** add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons */
  iconName?: DsIcon
  /** Button will be full width on both desktop and mobile */
  fullWidth?: boolean
  classNames?: string
  /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
  attributes?: { [key: string]: string }
  /** Fixed pixel value is used for typography to prevent scaling based on html font-size */
  forcePx?: boolean
  size?: 'sm' | 'md' | 'lg' | 'xl'
  loading?: boolean
  isIconButton?: boolean
}

export interface AllyProps {
  visuallyHidden?: string
}

export interface ButtonBaseProps extends ButtonSharedProps {
  /** Button will only full width on mobile */
  mobileFullWidth?: boolean
  iconPosition?: 'none' | 'left' | 'right'
  type?: 'button' | 'submit'
  /** If href is set the button will be rendered as an a-tag */
  href?: string
  selected?: boolean
  isToggle?: boolean
  selectedIconName?: DsIcon
  selectedText?: string
}

export interface InnerButtonProps {
  text?: string
  isIconButton?: boolean
  attributes?: object | any
  icon?: any
  loadingHtml?: any
}

export interface ToggleWrapperProps {
  selected?: boolean
  classes?: string
  attributes?: object
  disabled?: boolean
  loadingHtml?: any
  onChild?: any
  offChild?: any
}

export interface ButtonStandardProps
  extends ButtonSharedProps,
    Pick<ButtonBaseProps, 'iconPosition' | 'type' | 'href' | 'mobileFullWidth'> {
  text: string
}

export interface ButtonIconProps
  extends ButtonSharedProps,
    Pick<ButtonBaseProps, 'iconPosition' | 'type' | 'href' | 'mobileFullWidth'> {
  iconName: DsIcon
}

export type ButtonProps = ({ isIconButton: true } & ButtonIconProps) | ({ isIconButton?: false } & ButtonStandardProps)

export interface ButtonToggleStandardProps
  extends ButtonSharedProps,
    Pick<ButtonBaseProps, 'selected' | 'selectedText' | 'selectedIconName' | 'mobileFullWidth'> {
  selectedText: string
}

export interface ButtonToggleIconProps
  extends ButtonSharedProps,
    Pick<ButtonBaseProps, 'selected' | 'selectedText' | 'mobileFullWidth'> {
  iconName: DsIcon
  selectedIconName: DsIcon
}

export type ButtonToggleProps =
  | ({ isIconButton?: false } & ButtonToggleStandardProps)
  | ({ isIconButton: true } & ButtonToggleIconProps)

export interface TextButtonProps {
  text: string
  type?: 'button' | 'submit'
  /** If href is set the button will be rendered as an a-tag */
  href?: string
  disabled?: boolean
  fullWidth?: boolean
  /** Button will only full width on mobile */
  mobileFullWidth?: boolean
  /** add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons */
  iconName?: DsIcon
  iconPosition?: 'none' | 'left' | 'right'
  hideTextOnMobile?: boolean
  size?: 'sm' | 'lg'
  loading?: boolean
  forcePx?: boolean
  classNames?: string
  /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
  attributes?: { [key: string]: string }
}