import React, {useState} from 'react';
import {
  InputAdornment,
  MenuItem,
  Select,
  TextField,
  Typography,
} from '@mui/material';
import {
  defaultCountries,
  FlagImage,
  getActiveFormattingMask,
  parseCountry,
  usePhoneInput,
} from 'react-international-phone';

import 'react-international-phone/style.css';

interface Props {
  value: string;
  onChange: (phoneNumber: string) => void;
  label: string;
}

const PhoneInput = ({value, onChange, label}: Props) => {
  const [phone, setPhone] = useState(value);

  const browserLocales = navigator.language.split('-');
  const defaultCountry =
    browserLocales[browserLocales.length - 1].toLowerCase();

  const {inputValue, handlePhoneValueChange, inputRef, country, setCountry} =
    usePhoneInput({
      defaultCountry: defaultCountry || defaultCountries[0][1],
      value: phone,
      countries: defaultCountries,
      onChange: data => {
        setPhone(data.phone);
        const mask = getActiveFormattingMask({
          phone: data.phone,
          country: data.country,
        });
        const digitnumbers = mask.split('').filter(c => c === '.').length;
        const isValid =
          data.phone.length === 1 + data.country.dialCode.length + digitnumbers;
        if (isValid) {
          onChange(data.phone);
        } else {
          onChange('');
        }
      },
    });

  return (
    <TextField
      fullWidth
      color={value === phone ? 'primary' : 'error'}
      label={label}
      value={inputValue}
      onChange={handlePhoneValueChange}
      type="tel"
      inputRef={inputRef}
      InputProps={{
        startAdornment: (
          <InputAdornment
            position="start"
            style={{marginRight: '2px', marginLeft: '-8px'}}
          >
            <Select
              MenuProps={{
                style: {
                  height: '300px',
                  width: '360px',
                  top: '10px',
                  left: '-34px',
                },
                transformOrigin: {
                  vertical: 'top',
                  horizontal: 'left',
                },
              }}
              sx={{
                width: 'max-content',
                // Remove default outline (display only on focus)
                fieldset: {
                  display: 'none',
                },
                '&.Mui-focused:has(div[aria-expanded="false"])': {
                  fieldset: {
                    display: 'block',
                  },
                },
                // Update default spacing
                '.MuiSelect-select': {
                  padding: '8px',
                  paddingRight: '24px !important',
                },
                svg: {
                  right: 0,
                },
              }}
              value={country.iso2}
              onChange={e => setCountry(e.target.value)}
              renderValue={value => (
                <FlagImage iso2={value} style={{display: 'flex'}} />
              )}
            >
              {defaultCountries.map(c => {
                const country = parseCountry(c);
                return (
                  <MenuItem key={country.iso2} value={country.iso2}>
                    <FlagImage
                      iso2={country.iso2}
                      style={{marginRight: '8px'}}
                    />
                    <Typography marginRight="8px">{country.name}</Typography>
                    <Typography color="gray">+{country.dialCode}</Typography>
                  </MenuItem>
                );
              })}
            </Select>
          </InputAdornment>
        ),
      }}
    />
  );
};

export default PhoneInput;