---
import type { HTMLAttributes } from 'astro/types'
import LinkButton from '../../LinkButton/index.astro'
import ProgressBar from '../../ProgressBar/index.astro'
import IconPaperclip from '../../icons/default/IconPaperclip.astro'
import IconTrash2 from '../../icons/default/IconTrash2.astro'
import '../../../dist/components/styles/styles.css'

export type FileUploadPreviewLink = {
  label: string
  href?: string
  target?: string
}

/**
 * Same markup as the React `FileUpload.Preview`. `icon` is the `icon` slot.
 * `onRemove` has no counterpart: `removable` renders the remove button, which
 * carries `data-au-file-upload="remove"` for the page's own `<script>`; the
 * link has no `onClick` either, so give it an `href` or listen on
 * `.au-file-upload-preview__link`. Every other HTML attribute lands on the
 * root `div`.
 */
export type Props = HTMLAttributes<'div'> & {
  /** Nome do arquivo. Figma: File Name. */
  name: string
  /** Tamanho ("1,2 MB") ou status ("Enviando... 30%"). Figma: Description. */
  description?: string
  /** Mensagem de erro abaixo da linha, com o motivo e o próximo passo; liga o estado Error. Figma: Error Message, State=Error. */
  error?: string
  /** Percentual do envio, de 0 a 100; mostra a Percentage Bar abaixo da linha. Figma: Show Progress. */
  progress?: number
  /** Esconde o quadro do ícone. Figma: Show Leading Icon=False. */
  hideIcon?: boolean
  /** Link Button small à direita ("Ver"). Figma: Show Link. */
  link?: FileUploadPreviewLink
  /** Mostra o botão de remover (Ghost, ícone, 40x40). Figma: Show Button. */
  removable?: boolean
  /** `aria-label` do botão de remover. */
  removeLabel?: string
}

const {
  name,
  description,
  error,
  progress,
  hideIcon = false,
  link,
  removable = false,
  removeLabel = 'Remover arquivo',
  class: className,
  ...rest
} = Astro.props

const hasProgress = progress !== undefined
const hasCustomIcon = Astro.slots.has('icon')
---

<div
  class:list={[
    'au-file-upload-preview',
    error && 'au-file-upload-preview--error',
    hasProgress && 'au-file-upload-preview--with-progress',
    className,
  ]}
  {...rest}>
  <div class="au-file-upload-preview__row">
    {
      !hideIcon && (
        <span class="au-file-upload-preview__icon" aria-hidden="true">
          {hasCustomIcon ? <slot name="icon" /> : <IconPaperclip />}
        </span>
      )
    }
    <span class="au-file-upload-preview__text">
      <span class="au-file-upload-preview__name">{name}</span>
      {description && <span class="au-file-upload-preview__description">{description}</span>}
    </span>
    {
      (link || removable) && (
        <span class="au-file-upload-preview__actions">
          {link && (
            <LinkButton as={link.href ? 'a' : 'button'} href={link.href} target={link.target} size="small" class="au-file-upload-preview__link">{link.label}</LinkButton>
          )}
          {removable && (
            <button type="button" class="au-file-upload-preview__remove" aria-label={removeLabel} data-au-file-upload="remove">
              <IconTrash2 />
            </button>
          )}
        </span>
      )
    }
  </div>
  {error && <span class="au-file-upload-preview__error">{error}</span>}
  {
    hasProgress && (
      <div class="au-file-upload-preview__progress">
        <ProgressBar percentage={progress} stepName={`Envio de ${name}`} showDescription={false} />
      </div>
    )
  }
</div>