---
import type { HTMLAttributes } from 'astro/types'
import IconCheck from '../icons/default/IconCheck.astro'
import CheckboxField from '../form/Checkbox/Field/index.astro'
import Skeleton from '../Skeleton/index.astro'
import Spinner from '../Spinner/index.astro'
import '../../dist/components/DropdownItem/styles.css'

export type DropdownItemType = 'item' | 'category'
export type DropdownItemState = 'default' | 'loading' | 'skeleton' | 'empty'

/**
 * Same props and markup as the React `DropdownItem` (Figma: Dropdown
 * Instance). Differences from React: `leading` and `trailing` are the
 * `leading` and `trailing` named slots; `onClick` has no counterpart (forward
 * an `id` or `data-*`, or use it inside a `SearchBar`, which emits
 * `au:searchselect`). Every HTML attribute lands on the `<li>`.
 */
export type Props = HTMLAttributes<'li'> & {
  /** Item (opção que a pessoa toca) ou Category (título de grupo, só texto). Figma: Dropdown Instance, Type. */
  type?: DropdownItemType
  label: string
  /** Segunda linha abaixo do label (Description=True). Só no tipo item. */
  description?: string
  /** Troca o leading pelo `Checkbox.Field` da lib (Show Checkbox), para lista de seleção múltipla; `selected` marca o checkbox em vez de pintar o item. */
  checkbox?: boolean
  /** Fundo action-subtle, label em azul e check à direita (State=Selected). */
  selected?: boolean
  disabled?: boolean
  /** Estados sem conteúdo (State=Loading, Skeleton e Empty): só sem description. */
  state?: DropdownItemState
  /** Foco virtual da navegação por teclado (State=Focus): quem tem o foco real é o campo. */
  focused?: boolean
}

const {
  type = 'item',
  label,
  description,
  checkbox = false,
  selected = false,
  disabled = false,
  state = 'default',
  focused = false,
  class: className,
  role,
  // Passed as `<DropdownItem slot="x" />` the `slot` arrives as a prop; spread
  // into `...rest` it would render as a stray `slot` attribute.
  slot: _slot,
  ...rest
} = Astro.props

const isCategory = type === 'category'
const isItem = !isCategory && state === 'default'
const hasLeading = Astro.slots.has('leading')
const hasTrailing = Astro.slots.has('trailing')
const showTrailing = selected && !checkbox ? true : hasTrailing

const classes = [
  'au-dropdown-item',
  `au-dropdown-item--type-${type}`,
  isItem && description && 'au-dropdown-item--with-description',
  isItem && checkbox && 'au-dropdown-item--with-checkbox',
  isItem && selected && 'au-dropdown-item--selected',
  isItem && disabled && 'au-dropdown-item--disabled',
  isItem && focused && 'au-dropdown-item--focused',
  !isCategory && state !== 'default' && `au-dropdown-item--state-${state}`,
  className,
]
---

{
  isCategory ? (
    <li class:list={classes} role={role ?? 'presentation'} {...rest}>
      <span class="au-dropdown-item__label">{label}</span>
    </li>
  ) : state === 'loading' ? (
    <li class:list={classes} role={role ?? 'presentation'} {...rest}>
      <Spinner size="small" />
    </li>
  ) : state === 'skeleton' ? (
    <li class:list={classes} role={role ?? 'presentation'} aria-hidden="true" {...rest}>
      <Skeleton shape="circle" width={20} height={20} />
      <Skeleton block height={20} />
    </li>
  ) : state === 'empty' ? (
    <li class:list={classes} role={role ?? 'option'} aria-selected="false" aria-disabled="true" {...rest}>
      <span class="au-dropdown-item__content">
        <span class="au-dropdown-item__label">{label}</span>
      </span>
    </li>
  ) : (
    <li
      class:list={classes}
      role={role ?? 'option'}
      aria-selected={selected ? 'true' : 'false'}
      aria-disabled={disabled ? 'true' : undefined}
      {...rest}>
      {checkbox ? (
        <span class="au-dropdown-item__leading" aria-hidden="true">
          <CheckboxField checked={selected} disabled={disabled} readonly tabindex="-1" />
        </span>
      ) : (
        hasLeading && (
          <span class="au-dropdown-item__leading" aria-hidden="true">
            <slot name="leading" />
          </span>
        )
      )}
      <span class="au-dropdown-item__content">
        <span class="au-dropdown-item__label">{label}</span>
        {description && <span class="au-dropdown-item__description">{description}</span>}
      </span>
      {showTrailing && (
        <span class="au-dropdown-item__trailing" aria-hidden="true">
          {selected && !checkbox ? <IconCheck /> : <slot name="trailing" />}
        </span>
      )}
    </li>
  )
}