---
import type { HTMLAttributes } from 'astro/types'
import Button from '../Button/index.astro'
import Text from '../Text/index.astro'
import IconArchive from '../icons/default/IconArchive.astro'
import IconSearch from '../icons/default/IconSearch.astro'
import '../../dist/components/EmptyState/styles.css'

export type EmptyStateType = 'card' | 'plain' | 'search-result'
export type EmptyStateSize = 'mobile' | 'desktop'

export type EmptyStateAction = {
  label: string
  /** Com `href`, o botão sai como link (`<a>`). */
  href?: string
  target?: string
}

/**
 * Same props and markup as the React `EmptyState`. `icon` is the `icon` slot
 * and `illustration` the `illustration` slot. No `onClick` on the actions:
 * the buttons carry `data-au-empty-state="primary"` and
 * `data-au-empty-state="secondary"` for the page's own `<script>`, or an
 * `href` makes them links. Every HTML attribute is forwarded to the
 * `<section>`.
 */
export type Props = HTMLAttributes<'section'> & {
  /**
   * Card (borda e cantos arredondados, para áreas com limite visual próprio), Plain (solto na página ou
   * dentro de algo que já tem borda) ou Search Result (busca ou filtro sem resultado: ícone de busca fixo
   * e sem botões). Figma: Style.
   */
  type?: EmptyStateType
  title: string
  description?: string
  /** Esconde o ícone sem colocar nada no lugar. Figma: Show Icon=False. */
  hideIcon?: boolean
  /** Botão Outlined, a ação que resolve o vazio. Sem ele não há botões (Show Actions=False). Search Result nunca tem botões. */
  primaryAction?: EmptyStateAction
  /** Botão Ghost, o caminho alternativo. Só aparece junto do primeiro (Show Secondary Button=False o desliga). */
  secondaryAction?: EmptyStateAction
  /** Força o layout Mobile (descrição 14/22) ou Desktop (16/24). Sem ela, segue o breakpoint de 1024px. Figma: Size. */
  size?: EmptyStateSize
  /** Tag do título. */
  titleAs?: 'h2' | 'h3' | 'h4'
}

const {
  type = 'card',
  title,
  description,
  hideIcon = false,
  primaryAction,
  secondaryAction,
  size,
  titleAs = 'h3',
  class: className,
  ...rest
} = Astro.props

// Stand in for the React `useId()`.
const titleId = `au-empty-state-${crypto.randomUUID().slice(0, 8)}-title`
const isSearch = type === 'search-result'
const showIllustration = Astro.slots.has('illustration')
const showIcon = !showIllustration && !hideIcon
const hasCustomIcon = Astro.slots.has('icon')
// Search Result has no actions: the way out is adjusting the search. Visual
// order of the Figma: the Ghost (secondary) on the left, the Outlined on the right.
const actions = (
  !isSearch && primaryAction
    ? [
        { kind: 'secondary' as const, action: secondaryAction },
        { kind: 'primary' as const, action: primaryAction },
      ]
    : []
).filter((item): item is { kind: 'primary' | 'secondary'; action: EmptyStateAction } => !!item.action)
---

<section
  class:list={[
    'au-empty-state',
    `au-empty-state--type-${type}`,
    size && `au-empty-state--size-${size}`,
    actions.length > 0 && 'au-empty-state--with-actions',
    showIllustration && 'au-empty-state--with-illustration',
    className,
  ]}
  aria-labelledby={titleId}
  {...rest}>
  {
    showIllustration && (
      <div class="au-empty-state__illustration">
        <slot name="illustration" />
      </div>
    )
  }
  {
    showIcon && (
      <div class="au-empty-state__icon" aria-hidden="true">
        {isSearch ? <IconSearch /> : hasCustomIcon ? <slot name="icon" /> : <IconArchive />}
      </div>
    )
  }
  <div class="au-empty-state__content">
    <Text as={titleAs} id={titleId} variant="body-medium" weight="semibold" class="au-empty-state__title">
      {title}
    </Text>
    {
      description && (
        <Text as="p" variant="body-small" color="secondary" class="au-empty-state__description">
          {description}
        </Text>
      )
    }
  </div>
  {
    actions.length > 0 && (
      <div class="au-empty-state__actions">
        {actions.map(({ kind, action }) => (
          <Button
            as={action.href ? 'a' : 'button'}
            href={action.href}
            target={action.target}
            type={kind === 'primary' ? 'outlined' : 'ghost'}
            size="medium"
            class:list={['au-empty-state__action', `au-empty-state__action--${kind}`]}
            data-au-empty-state={kind}>
            {action.label}
          </Button>
        ))}
      </div>
    )
  }
</section>