gridpilot.gg/apps/website/components/shared/CountrySelect.tsx

import { Check, ChevronDown, Globe, Search } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { CountryFlag } from '@/ui/CountryFlag';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Surface } from '@/ui/Surface';
import { Icon } from '@/ui/Icon';
import { Input } from '@/ui/Input';

export interface Country {
  code: string;
  name: string;
}

export const COUNTRIES: Country[] = [
  { code: 'US', name: 'United States' },
  { code: 'GB', name: 'United Kingdom' },
  { code: 'DE', name: 'Germany' },
  { code: 'NL', name: 'Netherlands' },
  { code: 'FR', name: 'France' },
  { code: 'IT', name: 'Italy' },
  { code: 'ES', name: 'Spain' },
  { code: 'AU', name: 'Australia' },
  { code: 'CA', name: 'Canada' },
  { code: 'BR', name: 'Brazil' },
  { code: 'JP', name: 'Japan' },
  { code: 'BE', name: 'Belgium' },
  { code: 'AT', name: 'Austria' },
  { code: 'CH', name: 'Switzerland' },
  { code: 'SE', name: 'Sweden' },
  { code: 'NO', name: 'Norway' },
  { code: 'DK', name: 'Denmark' },
  { code: 'FI', name: 'Finland' },
  { code: 'PL', name: 'Poland' },
  { code: 'PT', name: 'Portugal' },
  { code: 'CZ', name: 'Czech Republic' },
  { code: 'HU', name: 'Hungary' },
  { code: 'RU', name: 'Russia' },
  { code: 'MX', name: 'Mexico' },
  { code: 'AR', name: 'Argentina' },
  { code: 'CL', name: 'Chile' },
  { code: 'NZ', name: 'New Zealand' },
  { code: 'ZA', name: 'South Africa' },
  { code: 'IN', name: 'India' },
  { code: 'KR', name: 'South Korea' },
  { code: 'SG', name: 'Singapore' },
  { code: 'MY', name: 'Malaysia' },
  { code: 'TH', name: 'Thailand' },
  { code: 'AE', name: 'United Arab Emirates' },
  { code: 'SA', name: 'Saudi Arabia' },
  { code: 'IE', name: 'Ireland' },
  { code: 'GR', name: 'Greece' },
  { code: 'TR', name: 'Turkey' },
  { code: 'RO', name: 'Romania' },
  { code: 'UA', name: 'Ukraine' },
];

interface CountrySelectProps {
  value: string;
  onChange: (value: string) => void;
  error?: boolean;
  errorMessage?: string;
  disabled?: boolean;
  placeholder?: string;
}

export function CountrySelect({
  value,
  onChange,
  error,
  errorMessage,
  disabled,
  placeholder = 'Select country',
}: CountrySelectProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [search, setSearch] = useState('');
  const containerRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  const selectedCountry = COUNTRIES.find(c => c.code === value);

  const filteredCountries = COUNTRIES.filter(country =>
    country.name.toLowerCase().includes(search.toLowerCase()) ||
    country.code.toLowerCase().includes(search.toLowerCase())
  );

  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setIsOpen(false);
        setSearch('');
      }
    }

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  useEffect(() => {
    if (isOpen && inputRef.current) {
      inputRef.current.focus();
    }
  }, [isOpen]);

  const handleSelect = (code: string) => {
    onChange(code);
    setIsOpen(false);
    setSearch('');
  };

  return (
    <Box ref={containerRef} position="relative">
      {/* Trigger Button */}
      <Box
        as="button"
        type="button"
        onClick={() => !disabled && setIsOpen(!isOpen)}
        disabled={disabled}
        display="flex"
        alignItems="center"
        justifyContent="between"
        fullWidth
        rounded="md"
        paddingX={4}
        paddingY={3}
        bg="var(--ui-color-bg-surface-muted)"
        color="white"
        shadow="sm"
        transition="all 150ms"
        cursor={disabled ? 'not-allowed' : 'pointer'}
        opacity={disabled ? 0.5 : 1}
        outline="none"
        border
        borderColor={error ? 'var(--ui-color-intent-critical)' : 'var(--ui-color-border-default)'}
        hoverBorderColor={!disabled ? 'var(--ui-color-intent-primary)' : undefined}
      >
        <Group gap={3}>
          <Icon icon={Globe} size={4} intent="low" />
          {selectedCountry ? (
            <Group gap={2}>
              <CountryFlag countryCode={selectedCountry.code} size="md" />
              <Text as="span">{selectedCountry.name}</Text>
            </Group>
          ) : (
            <Text variant="low">{placeholder}</Text>
          )}
        </Group>
        <Icon 
          icon={ChevronDown} 
          size={4} 
          intent="low" 
          style={{ 
            transition: 'transform 200ms',
            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' 
          }} 
        />
      </Box>

      {/* Dropdown */}
      {isOpen && (
        <Surface 
          position="absolute" 
          zIndex={50} 
          marginTop={2} 
          width="100%" 
          rounded="lg" 
          variant="dark" 
          border 
          shadow="xl" 
          overflow="hidden"
        >
          {/* Search Input */}
          <Box padding={2} borderBottom>
            <Input
              ref={inputRef}
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search countries..."
              fullWidth
              size="sm"
              icon={<Icon icon={Search} size={4} intent="low" />}
            />
          </Box>

          {/* Country List */}
          <Box overflowY="auto" maxHeight="15rem">
            {filteredCountries.length > 0 ? (
              filteredCountries.map((country) => (
                <Box
                  as="button"
                  key={country.code}
                  type="button"
                  onClick={() => handleSelect(country.code)}
                  display="flex"
                  alignItems="center"
                  justifyContent="between"
                  fullWidth
                  paddingX={4}
                  paddingY={2.5}
                  textAlign="left"
                  transition="colors 150ms"
                  border="none"
                  bg={value === country.code ? 'rgba(25, 140, 255, 0.2)' : 'transparent'}
                  color={value === country.code ? 'white' : 'var(--ui-color-text-med)'}
                  cursor="pointer"
                  hoverBg="rgba(255, 255, 255, 0.05)"
                >
                  <Group gap={3}>
                    <CountryFlag countryCode={country.code} size="md" />
                    <Text as="span">{country.name}</Text>
                  </Group>
                  {value === country.code && (
                    <Icon icon={Check} size={4} intent="primary" />
                  )}
                </Box>
              ))
            ) : (
              <Box paddingX={4} paddingY={6} textAlign="center">
                <Text size="sm" variant="low">No countries found</Text>
              </Box>
            )}
          </Box>
        </Surface>
      )}

      {/* Error Message */}
      {error && errorMessage && (
        <Box marginTop={2}>
          <Text size="sm" variant="critical">{errorMessage}</Text>
        </Box>
      )}
    </Box>
  );
}