import React from 'react';
import {
  languageConfig,
  supportedLanguages,
  type SupportedLanguage
} from '../../locales';
import { useLanguageSwitcher } from '../../hooks/useLanguageSwitcher';
import { Select } from './Select';

interface LanguageSelectorProps {
  className?: string;
  variant?: 'compact' | 'full';
}

export function LanguageSelector({
  className,
  variant = 'full'
}: LanguageSelectorProps) {
  const { currentLanguage, changeLanguage, isChanging } = useLanguageSwitcher();

  const languageOptions = supportedLanguages.map(lang => ({
    value: lang,
    label: variant === 'compact'
      ? languageConfig[lang].code.toUpperCase()
      : languageConfig[lang].nativeName,
  }));

  const handleLanguageChange = (value: string | number | Array<string | number>) => {
    if (typeof value === 'string') {
      const newLanguage = value as SupportedLanguage;
      changeLanguage(newLanguage);
    }
  };

  return (
    <Select
      value={currentLanguage}
      onChange={handleLanguageChange}
      options={languageOptions}
      className={className}
      placeholder="Select language"
      disabled={isChanging}
    />
  );
}

// Compact version for headers/toolbars
export function CompactLanguageSelector({ className }: { className?: string }) {
  return (
    <LanguageSelector
      variant="compact"
      className={className}
    />
  );
}

// Hook for language-related utilities
export function useLanguageUtils() {
  const { currentLanguage, changeLanguage } = useLanguageSwitcher();

  const getCurrentLanguageConfig = () => languageConfig[currentLanguage];

  const isRTL = () => getCurrentLanguageConfig().rtl;

  const getLanguageFlag = () => getCurrentLanguageConfig().flag;

  const getLanguageName = () => getCurrentLanguageConfig().nativeName;

  return {
    currentLanguage,
    languageConfig: getCurrentLanguageConfig(),
    isRTL,
    getLanguageFlag,
    getLanguageName,
    changeLanguage,
    availableLanguages: supportedLanguages,
  };
}