import { IconChevronDown as ChevronDown } from '@tabler/icons-react'
import { t } from '@/shared/i18n'

export interface BirthValue {
  year: string
  month: string
  day: string
}

export const emptyBirth: BirthValue = { year: '', month: '', day: '' }

export function BirthDate({
  value,
  onChange,
  error,
  disabled = false,
  helper = t('ui.birth.helper'),
}: {
  value: BirthValue
  onChange: (value: BirthValue) => void
  error?: string
  disabled?: boolean
  helper?: string
}) {
  const days =
    value.year && value.month ? new Date(Date.UTC(Number(value.year), Number(value.month), 0)).getUTCDate() : 31
  const currentYear = new Date().getUTCFullYear()
  const options = [
    Array.from({ length: currentYear - 1899 }, (_, i) => currentYear - i),
    Array.from({ length: 12 }, (_, i) => i + 1),
    Array.from({ length: days }, (_, i) => i + 1),
  ]
  const parts = ['year', 'month', 'day'] as const
  return (
    <fieldset className="flex min-w-0 flex-col gap-2" disabled={disabled}>
      <legend className="mb-2 text-sm font-medium">{t('ui.birth.legend')}</legend>
      <div className="flex gap-2">
        {parts.map((part, index) => (
          <div key={part} className="relative min-w-0 flex-1">
            <select
              id={index === 0 ? 'birth' : `birth-${part}`}
              aria-label={t(
                index === 0 ? 'ui.birth.aria.year' : index === 1 ? 'ui.birth.aria.month' : 'ui.birth.aria.day',
              )}
              aria-invalid={!!error}
              aria-describedby="birth-description"
              value={value[part]}
              onChange={(event) => {
                const next = { ...value, [part]: event.currentTarget.value }
                if (
                  next.year &&
                  next.month &&
                  Number(next.day) > new Date(Date.UTC(Number(next.year), Number(next.month), 0)).getUTCDate()
                )
                  next.day = ''
                onChange(next)
              }}
              className={`h-12 w-full appearance-none rounded-lg border bg-field pr-8 pl-3 text-base outline-none focus:border-focus focus:ring-1 focus:ring-focus disabled:cursor-not-allowed disabled:bg-disabled ${value[part] ? 'text-ink' : 'text-muted'} ${error ? 'border-danger' : 'border-control-border'}`}
            >
              <option value="">
                {t(
                  index === 0
                    ? 'ui.birth.placeholder.year'
                    : index === 1
                      ? 'ui.birth.placeholder.month'
                      : 'ui.birth.placeholder.day',
                )}
              </option>
              {options[index].map((number) => (
                <option key={number} value={String(number)}>
                  {number}
                  {index > 0 ? t(index === 1 ? 'ui.birth.unit.month' : 'ui.birth.unit.day') : ''}
                </option>
              ))}
            </select>
            <ChevronDown size={16} className="pointer-events-none absolute top-4 right-3 text-icon" />
          </div>
        ))}
      </div>
      <p id="birth-description" className={`text-xs leading-normal ${error ? 'text-danger' : 'text-muted'}`}>
        {error || helper}
      </p>
    </fieldset>
  )
}