import {
  Select,
  SelectContent,
  SelectItem,
  SelectItemIndicator,
  SelectItemText,
  SelectTrigger,
  SelectValue,
} from '@langgenius/dify-ui/select'
import * as React from 'react'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { languages } from '@/i18n-config/language'

type Props = Readonly<{
  currentModel: any
  language: string
  voice: string
  onChange: (language: string, voice: string) => void
}>

const supportedLanguages = languages.filter((item) => item.supported)

const TTSParamsPanel = ({ currentModel, language, voice, onChange }: Props) => {
  const { t } = useTranslation()
  const voiceList = useMemo<Array<{ label: string; value: string }>>(() => {
    if (!currentModel) return []
    return currentModel.model_properties.voices.map((item: { mode: string; name: string }) => ({
      label: item.name,
      value: item.mode,
    }))
  }, [currentModel])
  const setLanguage = (language: string) => {
    onChange(language, voice)
  }
  const setVoice = (voice: string) => {
    onChange(language, voice)
  }
  return (
    <>
      <div className="mb-3">
        <div className="mb-1 flex items-center py-1 system-sm-semibold text-text-secondary">
          {t(($) => $['voice.voiceSettings.language'], { ns: 'appDebug' })}
        </div>
        <Select
          value={language}
          onValueChange={(value) => {
            if (value == null) return
            setLanguage(value)
          }}
        >
          <SelectTrigger
            className="w-full"
            aria-label={t(($) => $['voice.voiceSettings.language'], { ns: 'appDebug' })}
          >
            <SelectValue />
          </SelectTrigger>
          <SelectContent popupClassName="w-[354px]">
            {supportedLanguages.map((item) => (
              <SelectItem key={item.value} value={item.value}>
                <SelectItemText>{item.name}</SelectItemText>
                <SelectItemIndicator />
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      <div className="mb-3">
        <div className="mb-1 flex items-center py-1 system-sm-semibold text-text-secondary">
          {t(($) => $['voice.voiceSettings.voice'], { ns: 'appDebug' })}
        </div>
        <Select
          value={voice}
          onValueChange={(value) => {
            if (value == null) return
            setVoice(value)
          }}
        >
          <SelectTrigger
            className="w-full"
            aria-label={t(($) => $['voice.voiceSettings.voice'], { ns: 'appDebug' })}
          >
            <SelectValue />
          </SelectTrigger>
          <SelectContent popupClassName="w-[354px]">
            {voiceList.map((item) => (
              <SelectItem key={item.value} value={item.value}>
                <SelectItemText>{item.label}</SelectItemText>
                <SelectItemIndicator />
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </>
  )
}

export default TTSParamsPanel