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

/* eslint-disable gridpilot-rules/no-raw-html-in-app */


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';

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 */}
      <button
        type="button"
        onClick={() => !disabled && setIsOpen(!isOpen)}
        disabled={disabled}
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          width: '100%',
          borderRadius: 'var(--ui-radius-md)',
          border: 'none',
          padding: '0.75rem 1rem',
          backgroundColor: 'var(--ui-color-bg-surface-muted)',
          color: 'white',
          boxShadow: 'var(--ui-shadow-sm)',
          transition: 'all 150ms',
          cursor: disabled ? 'not-allowed' : 'pointer',
          opacity: disabled ? 0.5 : 1,
          outline: 'none',
          ring: '1px inset',
          borderColor: error ? 'var(--ui-color-intent-critical)' : 'var(--ui-color-border-default)'
        } as any}
        className={error ? 'ring-warning-amber' : 'ring-charcoal-outline focus:ring-primary-blue'}
      >
        <Group gap={3}>
          <Globe className="w-4 h-4 text-gray-500" />
          {selectedCountry ? (
            <Group gap={2}>
              <CountryFlag countryCode={selectedCountry.code} size="md" />
              <Text as="span">{selectedCountry.name}</Text>
            </Group>
          ) : (
            <Text variant="low">{placeholder}</Text>
          )}
        </Group>
        <ChevronDown className={`w-4 h-4 text-gray-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
      </button>

      {/* 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="1px solid var(--ui-color-border-muted)">
            <Box position="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
              <input
                ref={inputRef}
                type="text"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Search countries..."
                style={{
                  width: '100%',
                  borderRadius: 'var(--ui-radius-md)',
                  border: 'none',
                  padding: '0.5rem 1rem 0.5rem 2.25rem',
                  backgroundColor: 'var(--ui-color-bg-base)',
                  color: 'white',
                  fontSize: '0.875rem',
                  outline: 'none'
                }}
              />
            </Box>
          </Box>

          {/* Country List */}
          <Box overflowY="auto" maxHeight="15rem">
            {filteredCountries.length > 0 ? (
              filteredCountries.map((country) => (
                <button
                  key={country.code}
                  type="button"
                  onClick={() => handleSelect(country.code)}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    width: '100%',
                    padding: '0.625rem 1rem',
                    textAlign: 'left',
                    fontSize: '0.875rem',
                    transition: 'colors 150ms',
                    border: 'none',
                    backgroundColor: value === country.code ? 'rgba(25, 140, 255, 0.2)' : 'transparent',
                    color: value === country.code ? 'white' : 'var(--ui-color-text-med)',
                    cursor: 'pointer'
                  }}
                >
                  <Group gap={3}>
                    <CountryFlag countryCode={country.code} size="md" />
                    <Text as="span">{country.name}</Text>
                  </Group>
                  {value === country.code && (
                    <Check className="w-4 h-4 text-primary-blue" />
                  )}
                </button>
              ))
            ) : (
              <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>
  );
}