import { useEffect } from "react";
import { CountrySelector, usePhoneInput } from "react-international-phone";
import { ControllerFieldState } from "react-hook-form";
import "react-international-phone/style.css";
import "@/components/common/phone-nr-input.css";

import TextInput from "@/components/common/text-input";
import { AUTOCOMPLETE_VALUES } from "@/constants/signup-auto-complete-mapping";

type PhoneNumberInputProps = {
  fieldProps: any;
  fieldState: ControllerFieldState;
  defaultCountry?: string;
  onPhoneNumberChange: (phoneNumber: string, countryCode: string) => void;
  control?: any;
  name?: string;
};

function PhoneNumberInput({
  fieldProps,
  fieldState,
  defaultCountry = "gb",
  onPhoneNumberChange,
}: PhoneNumberInputProps) {
  const { phone, country, setCountry } = usePhoneInput({
    defaultCountry,
    onChange: () => {},
  });

  useEffect(() => {
    // calls the onPhoneNumberChange callback whenever phone or country changes, cannot be removed
    onPhoneNumberChange(fieldProps.value, country.dialCode);
  }, [phone, country, onPhoneNumberChange, fieldProps.value]);

  return (
    <div>
      <span
        className="block text-sm font-bold text-black tracking-tight font-inter"
        id={`${fieldProps?.name}-label`}
      >
        Mobile number
      </span>
      <TextInput
        isClearable
        aria-describedby={fieldProps?.name}
        aria-label="Mobile number"
        aria-labelledby={`${fieldProps?.name}-label`}
        autoComplete={AUTOCOMPLETE_VALUES.TEL}
        description="Your mobile number is required to verify your identify."
        fieldProps={fieldProps}
        fieldState={fieldState}
        name="Mobile number"
        pattern="[0-9]+"
        startContent={
          <>
            <CountrySelector
              selectedCountry={country.iso2}
              onSelect={(selectedCountry) => setCountry(selectedCountry.iso2)}
            />
            <div className="pointer-events-none flex items-center mx-0.5 font-noto">
              <span className="text-default-500 text-small">
                +{country.dialCode}
              </span>
            </div>
          </>
        }
        type="tel"
      />
    </div>
  );
}

export default PhoneNumberInput;