import intlTelInput from 'intl-tel-input';

const Phone = (document: ShadowRoot) => {
  const inputOnce = document.querySelector('#modalOnce-request2-phone');
  const inputs: HTMLInputElement[] = [inputOnce].filter(
    (item) => item !== null,
  ) as HTMLInputElement[];
  const isMobile =
    window.matchMedia('(max-width: 767px)').matches ||
    /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);

  if (inputs && inputs.length > 0) {
    return inputs.map((input) => {
      return intlTelInput(input, {
        initialCountry: 'auto',
        geoIpLookup: function (callback: (countryCode: string) => void) {
          fetch('https://ipapi.co/json')
            .then(function (res) {
              return res.json();
            })
            .then(function (data) {
              callback(data.country_code);
            })
            .catch(function () {
              callback('us');
            });
        },
        hiddenInput: 'full_number',
        nationalMode: false,
        autoInsertDialCode: true,
        formatOnDisplay: true,
        dropdownContainer: isMobile ? document : undefined,
        customContainer: '',
        separateDialCode: true,
        preferredCountries: ['gb', 'us', 'de', 'es', 'fr', 'it', 'pt', 'zh'],
        utilsScript: 'https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/utils.js',
      });
    });
  }
};

export default Phone;