import intlTelInput from "intl-tel-input";
import "intl-tel-input/build/css/intlTelInput.css";

const Phone = () => {
  const input = document.querySelector("#contacts-request-phone");
  const inputS = document.querySelector("#saas-request-phone");
  const inputS2 = document.querySelector("#saas2-request-phone");
  const inputS3 = document.querySelector("#saas2-request2-phone");
  const inputSR = document.querySelector("#saas-phone");
  const inputOnce = document.querySelector("#modalOnce-request2-phone");
  const inputFreeBrokerage = document.querySelector(
    "#free-brokerage-request-phone"
  );

  const inputs = [
    input,
    inputS,
    inputS2,
    inputS3,
    inputSR,
    inputOnce,
    inputFreeBrokerage,
  ].filter((item) => item !== null);

  if (inputs && inputs.length > 0) {
    return inputs.map((input) => {
      return intlTelInput(input, {
        initialCountry: "auto",
        geoIpLookup: function (callback) {
          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,
        autoHideDialCode: true,
        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;