'use client';

import { useLocalization } from '@akinon/next/hooks';
import { Select } from './select';

interface LanguageSelectProps {
  className?: string;
  showIcon?: boolean;
  iconClassName?: string;
  /** Custom SVG icon content */
  customIcon?: string;
  /** Label format: 'full' (English), 'short' (EN), 'code' (en) */
  labelFormat?: 'full' | 'short' | 'code';
}

// The theme editor's Language dropdown is kept in sync by @akinon/pz-theme
// (src/editor-locale-bridge.tsx), which every theme placeholder mounts. This
// component is only the storefront's own switcher: the header renders it more
// than once, so it must not talk to the editor itself.
export const LanguageSelect = (props: LanguageSelectProps) => {
  const { locale, locales, setLocale } = useLocalization();

  const handleChange = (e) => {
    setLocale(e.currentTarget.value);
  };

  // Format label based on labelFormat prop
  const formatLabel = (lang: { value: string; label: string }) => {
    switch (props.labelFormat) {
      case 'short':
        // Get first 2 characters uppercase (EN, TR, etc.)
        return lang.value.slice(0, 2).toUpperCase();
      case 'code':
        // Return locale code as-is (en, tr, etc.)
        return lang.value;
      case 'full':
      default:
        // Return full label (English, Türkçe, etc.)
        return lang.label;
    }
  };

  // Check if customIcon has actual SVG content
  const hasValidCustomIcon =
    props.customIcon &&
    typeof props.customIcon === 'string' &&
    props.customIcon.includes('<svg');

  return (
    <Select
      onChange={handleChange}
      options={locales.map((lang) => ({
        value: lang.value,
        label: formatLabel(lang)
      }))}
      value={locale}
      icon={
        props.showIcon !== false && !hasValidCustomIcon ? 'globe' : undefined
      }
      customIcon={props.showIcon !== false ? props.customIcon : undefined}
      data-testid="language"
      borderless
      className={props.className}
    />
  );
};