import { Label } from '@/components/ui/label';
import { Select } from '@/components/ui/select';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { PreferenceSettings as PreferenceSettingsType } from '../types/settings';

interface PreferenceSettingsProps {
  preferences: PreferenceSettingsType;
  onChange: (preferences: PreferenceSettingsType) => void;
}

const supportedLanguages = [
  { value: 'en', label: 'English' },
  { value: 'fr', label: 'Français' },
  { value: 'es', label: 'Español' },
  { value: 'de', label: 'Deutsch' },
  { value: 'it', label: 'Italiano' },
  { value: 'pt', label: 'Português' },
  { value: 'ru', label: 'Русский' },
  { value: 'ja', label: '日本語' },
  { value: 'zh', label: '中文' },
  { value: 'ko', label: '한국어' },
];

const commonTimezones = [
  { value: 'UTC', label: 'UTC' },
  { value: 'Europe/Paris', label: 'Europe/Paris' },
  { value: 'America/New_York', label: 'America/New_York' },
  { value: 'America/Los_Angeles', label: 'America/Los_Angeles' },
  { value: 'Asia/Tokyo', label: 'Asia/Tokyo' },
  { value: 'Asia/Shanghai', label: 'Asia/Shanghai' },
];

export function PreferenceSettings({
  preferences,
  onChange,
}: PreferenceSettingsProps) {
  const handleLanguageChange = (value: string | string[]) => {
    onChange({
      ...preferences,
      language: Array.isArray(value) ? value[0] : value,
    });
  };

  const handleTimezoneChange = (value: string | string[]) => {
    onChange({
      ...preferences,
      timezone: Array.isArray(value) ? value[0] : value,
    });
  };

  const handleThemeChange = (value: string) => {
    onChange({
      ...preferences,
      theme: value as 'light' | 'dark' | 'auto',
    });
  };

  return (
    <div className="space-y-6">
      <div className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="language">Langue</Label>
          <Select
            options={supportedLanguages}
            value={preferences.language}
            onChange={handleLanguageChange}
            placeholder="Sélectionner une langue"
            name="language"
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="timezone">Fuseau horaire</Label>
          <Select
            options={commonTimezones}
            value={preferences.timezone}
            onChange={handleTimezoneChange}
            placeholder="Sélectionner un fuseau horaire"
            name="timezone"
          />
        </div>

        <div className="space-y-2">
          <Label>Thème</Label>
          <RadioGroup
            value={preferences.theme}
            onValueChange={handleThemeChange}
          >
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="light" id="theme-light" />
              <Label htmlFor="theme-light" className="font-normal">
                Clair
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="dark" id="theme-dark" />
              <Label htmlFor="theme-dark" className="font-normal">
                Sombre
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="auto" id="theme-auto" />
              <Label htmlFor="theme-auto" className="font-normal">
                Automatique
              </Label>
            </div>
          </RadioGroup>
        </div>
      </div>
    </div>
  );
}
