import { ComponentChildren } from 'preact'

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

import { ButtonToggleStandardProps } from '../button/button-types'
import { SwitchInnerProps } from '../switch/switch'

export interface ListItemSharedProps {
  title?: string
  subtitle?: string
  meta?: string
  border?: boolean
  fontWeight?: 'regular' | 'semibold' | 'bold'
  attributes?: { [key: string]: string }
  children?: ComponentChildren
  /** Applies to the left element: anchor */
  linkAttributes?: { [key: string]: string }
  disabled?: boolean
  forcePx?: boolean
  classNames?: string
}

export interface ListItemBaseProps extends ListItemSharedProps {
  listItemType: 'accordion' | 'checkbox' | 'switch' | 'image' | 'standard' | 'toggle'
  /** Links entire list item */
  href?: string
  leadingIcon?: DsIcon
  trailingIcon?: DsIcon
  mediaHtml?: string
  name?: string
  accordionContent?: any
  checked?: boolean
  selected?: boolean
  stripLabel?: boolean
  /** Applied to the right element: checkbox or button ('toggle') */
  interactiveElementAttributes?: { [key: string]: string }
  interactiveElementClassNames?: string
}

export interface AccordionListItemProps
  extends ListItemSharedProps,
    Pick<ListItemBaseProps, 'accordionContent' | 'leadingIcon'> {}

export interface CheckboxListItemProps
  extends ListItemSharedProps,
    Pick<
      ListItemBaseProps,
      | 'href'
      | 'name'
      | 'checked'
      | 'stripLabel'
      | 'disabled'
      | 'interactiveElementAttributes'
      | 'interactiveElementClassNames'
    > {}

export interface ImageListItemProps extends ListItemSharedProps, Pick<ListItemBaseProps, 'href' | 'trailingIcon'> {
  mediaHtml: string
}

export interface StandardListItemProps
  extends ListItemSharedProps,
    Pick<ListItemBaseProps, 'href' | 'leadingIcon' | 'trailingIcon'> {}

export interface SwitchListItemProps
  extends ListItemSharedProps,
    SwitchInnerProps,
    Pick<
      ListItemBaseProps,
      | 'leadingIcon'
      | 'disabled'
      | 'checked'
      | 'stripLabel'
      | 'interactiveElementAttributes'
      | 'interactiveElementClassNames'
    > {
  name: string
}

export interface ToggleListItemProps
  extends ListItemSharedProps,
    ButtonToggleStandardProps,
    Pick<
      ListItemBaseProps,
      'title' | 'subtitle' | 'disabled' | 'selected' | 'interactiveElementAttributes' | 'interactiveElementClassNames'
    > {
  name: string
  /** Only links title */
  titleHref?: string
  toggleText: string
  toggleSelectedText: string
}

export type ListItemProps =
  | ({ listItemType: 'accordion' } & AccordionListItemProps)
  | ({ listItemType: 'checkbox' } & CheckboxListItemProps)
  | ({ listItemType: 'image' } & ImageListItemProps)
  | ({ listItemType: 'standard' } & StandardListItemProps)
  | ({ listItemType: 'switch' } & SwitchListItemProps)
  | ({ listItemType: 'toggle' } & ToggleListItemProps)

export interface InnerListItemProps
  extends ListItemSharedProps,
    Pick<
      ListItemBaseProps,
      | 'listItemType'
      | 'href'
      | 'accordionContent'
      | 'name'
      | 'checked'
      | 'selected'
      | 'forcePx'
      | 'disabled'
      | 'interactiveElementAttributes'
      | 'interactiveElementClassNames'
    >,
    Pick<ButtonToggleStandardProps, 'variant'> {
  componentClassName: string
  toggleText?: string
  toggleSelectedText?: string
}

export type TitleProps = Pick<
  ListItemBaseProps,
  'title' | 'subtitle' | 'fontWeight' | 'disabled' | 'attributes' | 'linkAttributes'
> & {
  componentClassName: string
  titleHref?: string
}