Account/src/features/profile/components/CountryCodeSelector.tsx

import {
  Box,
  InputAdornment,
  ListItem,
  ListItemIcon,
  ListItemText,
  Menu,
  MenuItem,
  TextField,
  Typography,
} from '@mui/material';
import { useMemo, useRef, useState, type RefObject } from 'react';
import { ArrowDown2 } from 'iconsax-react';
import ReactCountryFlag from 'react-country-flag';
import { useTranslation } from 'react-i18next';
import { countries, type Country } from '../../../data/countries';
import type { CountryCode } from '@/types/commonTypes';
import { Icon } from '@rkheftan/harmony-ui';
import { LTRBox } from '@/components/common/LTRBox';
import { Virtuoso } from 'react-virtuoso';

interface CountryCodeSelectorProps {
  show: boolean;
  value: CountryCode;
  onChange: (newValue: CountryCode) => void;
  menuAnchor: HTMLElement | null;
  onCloseFocusRef: RefObject<HTMLInputElement | null>;
}

export function CountryCodeSelector({
  show,
  value,
  onChange,
  menuAnchor,
  onCloseFocusRef,
}: CountryCodeSelectorProps) {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [searchTerm, setSearchTerm] = useState('');
  const open = Boolean(anchorEl);
  const searchInputRef = useRef<HTMLInputElement>(null);
  const menuWidth = menuAnchor ? menuAnchor.clientWidth : 'auto';
  const { t, i18n } = useTranslation(['country', 'common']);

  const selectedCountry =
    countries.find((c) => c.phone === value) || countries[0];

  const handleClick = () => setAnchorEl(menuAnchor);

  const handleClose = () => {
    setTimeout(() => setAnchorEl(null), 0);
    setTimeout(() => {
      onCloseFocusRef.current?.focus();
    }, 100);
    setSearchTerm('');
  };

  const handleSelect = (country: Country) => {
    onChange(country.phone);
    handleClose();
  };

  const handleMenuEntered = () => {
    searchInputRef.current?.focus();
  };

  const filteredCountries = useMemo(
    () =>
      countries.filter(
        (country) =>
          t(country.label, { ns: 'country' })
            .toLowerCase()
            .includes(searchTerm.toLowerCase()) ||
          country.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
          country.phone.includes(searchTerm),
      ),
    [searchTerm, t],
  );

  const initialIndex = useMemo(() => {
    const index = filteredCountries.findIndex((c) => c.phone === value);
    return Math.max(0, index);
  }, [filteredCountries, value]);

  return (
    <InputAdornment
      position={i18n.dir() === 'rtl' ? 'start' : 'end'}
      sx={{ mx: 0 }}
    >
      <Box
        onClick={handleClick}
        sx={{
          width: show ? 'auto' : 0,
          opacity: show ? 1 : 0,
          transition: (theme) =>
            theme.transitions.create(['width', 'opacity'], {
              duration: theme.transitions.duration.standard,
            }),
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          height: '200%',
          display: 'flex',
          alignItems: 'center',
          gap: 0.25,
          pl: show ? 0.25 : 0,
          '&:hover': { cursor: 'pointer' },
        }}
      >
        <Icon Component={ArrowDown2} size="medium" variant="Bold" />

        <Typography
          variant="body1"
          color="text.primary"
          component="div"
          sx={{ direction: 'rtl' }}
        >
          {value}
        </Typography>

        <ReactCountryFlag
          countryCode={selectedCountry.code}
          svg
          style={{
            height: '1.5rem',
            width: '1.5rem',
            marginTop: '-2px',
            marginRight: '4px',
          }}
        />

        <Menu
          anchorEl={anchorEl}
          open={open}
          onClose={handleClose}
          slotProps={{
            paper: {
              sx: {
                width: menuWidth,
                maxHeight: '20rem',
                overflow: 'hidden',
              },
            },
            transition: { onEntered: handleMenuEntered },
          }}
          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
          transformOrigin={{ vertical: 'top', horizontal: 'left' }}
        >
          <Box
            sx={{
              position: 'sticky',
              top: 0,
              zIndex: 1,
              p: 1,
              backgroundColor: 'background.paper',
            }}
          >
            <TextField
              inputRef={searchInputRef}
              size="small"
              fullWidth
              label={t('labels.search', { ns: 'common' })}
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </Box>

          <Box sx={{ width: '100%', height: '25rem' }}>
            {filteredCountries.length === 0 ? (
              <MenuItem disabled>
                <ListItem>
                  <ListItemText>
                    {t('messages.noResualtFound', { ns: 'common' })}
                  </ListItemText>
                </ListItem>
              </MenuItem>
            ) : (
              <Virtuoso
                style={{ height: '100%', width: '100%' }}
                data={filteredCountries}
                initialTopMostItemIndex={initialIndex}
                itemContent={(_, country) => (
                  <MenuItem
                    key={country.code}
                    selected={country.phone === value}
                    onClick={() => handleSelect(country)}
                    sx={{ justifyContent: 'space-between' }}
                  >
                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                      <ListItemIcon sx={{ minWidth: 'auto' }}>
                        <ReactCountryFlag
                          countryCode={country.code}
                          svg
                          style={{ height: '1.125rem', width: '1.125rem' }}
                        />
                      </ListItemIcon>
                      <ListItemText
                        primary={t(country.label, { ns: 'country' })}
                      />
                    </Box>

                    <Typography color="text.secondary">
                      <LTRBox>{country.phone}</LTRBox>
                    </Typography>
                  </MenuItem>
                )}
                computeItemKey={(_, c) => c.code}
              />
            )}
          </Box>
        </Menu>
      </Box>
    </InputAdornment>
  );
}