'use client'
import type { FC } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger } from '@langgenius/dify-ui/select'
import * as React from 'react'
import { languages } from '@/i18n-config/language'

export type ILanguageSelectProps = {
  currentLanguage: string
  onSelect: (language: string) => void
  disabled?: boolean
}

const LanguageSelect: FC<ILanguageSelectProps> = ({
  currentLanguage,
  onSelect,
  disabled,
}) => {
  const supportedLanguages = languages.filter(language => language.supported)

  return (
    <Select
      value={currentLanguage}
      onValueChange={(value) => {
        if (value == null)
          return
        onSelect(value)
      }}
      disabled={disabled}
    >
      <SelectTrigger
        size="small"
        aria-label="language"
        className={cn(
          'mx-1 w-auto shrink-0 bg-components-button-tertiary-bg text-components-button-tertiary-text hover:bg-components-button-tertiary-bg',
          disabled && 'cursor-not-allowed bg-components-button-tertiary-bg-disabled text-components-button-tertiary-text-disabled hover:bg-components-button-tertiary-bg-disabled',
        )}
      >
        {currentLanguage || <span>&nbsp;</span>}
      </SelectTrigger>
      <SelectContent
        placement="bottom-start"
        sideOffset={4}
        popupClassName="w-max"
      >
        {supportedLanguages.map(({ prompt_name }) => (
          <SelectItem key={prompt_name} value={prompt_name}>
            <SelectItemText>{prompt_name}</SelectItemText>
            <SelectItemIndicator />
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}
export default React.memo(LanguageSelect)