import { type FC } from 'react';

import { type CountryCode, getCountryCallingCode } from 'libphonenumber-js';

import FormInputPhone from '@material-hu/components/design-system/Inputs/Phone/form';

import useRules from 'src/hooks/useRules';

type Props = {
  name: string;
  countryCode: CountryCode;
  required?: boolean;
};

const PhoneInput: FC<Props> = ({ name, countryCode, required = false }) => {
  const callingCode = getCountryCallingCode(countryCode);

  return (
    <FormInputPhone
      name={name}
      rules={useRules({
        requiredPhoneNumber: required ? callingCode : false,
        phoneNumber: callingCode,
      })}
      validatePhoneNumber={false}
      disabled={false}
      inputProps={{
        showErrors: true,
        defaultCountry: countryCode,
      }}
    />
  );
};

export default PhoneInput;