/**
 * Custom Form Component: Select with Reset Button
 *
 * A select/combobox field with an optional reset to default button.
 * Built on top of shadcn/ui Select component.
 *
 * @author Andreas Weyer
 * @license MIT
 */

import * as React from "react"
import { RotateCcw } from "lucide-react"
import { IconButtonWithTooltip } from "./icon-button-with-tooltip"
import { Select, SelectTrigger, SelectValue, SelectContent } from "./select"
import { cn } from "../../lib/utils"
import { useTranslation } from "react-i18next"

interface FormSelectProps {
  value: string
  onValueChange: (value: string) => void
  showResetButton?: boolean
  defaultValue?: string
  children: React.ReactNode
  triggerClassName?: string
  placeholder?: string
}

export const FormSelect: React.FC<FormSelectProps> = ({
  value,
  onValueChange,
  showResetButton = false,
  defaultValue,
  children,
  triggerClassName,
  placeholder,
}) => {
  const { t } = useTranslation()

  return (
    <div className="flex items-center gap-0">
          <Select value={value} onValueChange={onValueChange}>
        <SelectTrigger className={cn(
          showResetButton && "rounded-r-none border-r-0 z-10",
          "bg-background",
          triggerClassName
        )}>
          <SelectValue placeholder={placeholder} />
        </SelectTrigger>
        {children}
      </Select>
      {showResetButton && (
        <IconButtonWithTooltip
          type="button"
          icon={<RotateCcw className="h-4 w-4" />}
          tooltip={t('buttonResetToDefault')}
          variant="outline"
          size="icon"
          className="h-9 w-9 rounded-l-none border-l-0"
          onClick={() => onValueChange(defaultValue || '')}
          tabIndex={-1}
        />
      )}
    </div>
  )
}