import { useEffect, useState } from 'react'
import { HelperText, Label, Select } from 'flowbite-react'

import formTheme from '@/lib/themes/form'
import { getLanguages } from '@/lib/services/language-services'

interface LanguageSelectorProps {
  value?: string
  label?: string
  required?: boolean
  id?: string
  errorMessage?: string
  placeholder?: string
  onChange?: (language: Language | null) => void
}

export default function LanguageSelector({
  value,
  label = 'Language',
  required = false,
  id = 'lang_code',
  errorMessage,
  placeholder = '-- Select Language --',
  onChange,
}: LanguageSelectorProps) {
  const [languages, setLanguages] = useState<Language[]>([])

  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const selectedLanguage = languages.find(
      (language) => language.code === e.target.value,
    )
    onChange?.(selectedLanguage || null)
  }

  useEffect(() => {
    getLanguages().then((data) => {
      setLanguages(data)
    })
  }, [])

  return (
    <div>
      <div className="mb-2 block">
        <Label theme={formTheme.label} htmlFor={id}>
          {label} {required && <span className="text-red-500">*</span>}
        </Label>
      </div>
      <Select
        theme={formTheme.select}
        id={id}
        value={value ?? ''}
        onChange={handleSelectionChange}
        disabled={languages.length === 0}
      >
        <option value="">{placeholder}</option>
        {languages?.map((language) => (
          <option key={language.code} value={language.code}>
            {language.name} ({language.code})
          </option>
        ))}
      </Select>
      {errorMessage && <HelperText color="failure">{errorMessage}</HelperText>}
    </div>
  )
}