<template>
  <f7-page name="verifyphonenumber" no-swipeback login-screen>
    <f7-login-screen-title>Verify Your Phone Number</f7-login-screen-title>
    <f7-navbar title="Phone Verification" back-link="Back"></f7-navbar>

    <div class="align-center">
      <f7-block>
        <f7-list no-hairlines-md>
          <div class="component mb-2">
            <VuePhoneNumberInput id="phoneNumber1" v-model="phonenumber" color="dodgerblue" :dark="dark"
              :disabled="disabled" :ignored-countries="countriesIgnored" :preferred-countries="countriesList"
              :loader="hasLoaderActive" clearable :error="hasErrorActive" class="mb-2" @update="onUpdate" />
            <b>Phone number</b>
            : {{ results.formattedNumber }}
          </div>
          <br />
          <f7-button fill @click="sendOtp">Get OTP</f7-button>
          <div id="recaptcha-container"></div>

          <f7-list-input :value="otp" @input="otp = $event.target.value" label="Enter OTP Received" type="text"
            placeholder="Enter OTP" clear-button></f7-list-input>
        </f7-list>

        <f7-button fill color="blue" @click="verifyOtp">Verify</f7-button>
        <br />
        <f7-button fill color="blue" @click="sendOtp()">Resend OTP</f7-button>
      </f7-block>
    </div>
  </f7-page>
</template>

<script>
import VuePhoneNumberInput from "vue-phone-number-input";
import "vue-phone-number-input/dist/vue-phone-number-input.css";

import { setInterval, clearInterval } from "timers";
import { mixin } from "../../js/mixin";
import firebase from "firebase";
import {
  f7Page,
  f7LoginScreenTitle,
  f7List,
  f7ListItem,
  f7ListButton,
  f7BlockFooter,
  f7ListInput,
} from "framework7-vue";

export default {
  components: {
    VuePhoneNumberInput,
    f7Page,
    f7LoginScreenTitle,
    f7List,
    f7ListItem,
    f7ListButton,
    f7BlockFooter,
    f7ListInput,
  },
  data() {
    return {
      confirmationResult: null,
      phonenumber: null,
      phoneNumber2: null,
      phoneNumber3: "0665656565",
      defaultCountry: "",
      countriesList: [],
      countriesIgnored: [],
      translations: {
        countrySelectorLabel: "Code pays",
        countrySelectorError: "Choisir un pays",
        phoneNumberLabel: "Numéro de téléphone",
      },
      results: {},
      results2: {},
      results3: {},
      dark: false,
      disabled: false,
      hasLoaderActive: false,
      hasErrorActive: false,
      status: false,
      phNo: "",
      appVerifier: "",
      otp: "",
    };
  },
  methods: {
    getOS() {
      // console.log("getos");
      var userAgent = window.navigator.userAgent,
        platform = window.navigator.platform,
        macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"],
        windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"],
        iosPlatforms = ["iPhone", "iPad", "iPod"],
        os = null;

      if (macosPlatforms.indexOf(platform) !== -1) {
        os = "Mac OS";
      } else if (iosPlatforms.indexOf(platform) !== -1) {
        os = "iOS";
      } else if (windowsPlatforms.indexOf(platform) !== -1) {
        os = "Windows";
      } else if (/Android/.test(userAgent)) {
        os = "Android";
      } else if (!os && /Linux/.test(platform)) {
        os = "Linux";
      }

      return os;
    },

    getCountryName(countryCode) {
      var country = "";
      switch (countryCode) {
        case "AF":
          country = "Afghanistan";
          break;
        case "AL":
          country = "Albania";
          break;
        case "DZ":
          country = "Algeria";
          break;
        case "AS":
          country = "American Samoa";
          break;
        case "AD":
          country = "Andorra";
          break;
        case "AO":
          country = "Angola";
          break;
        case "AI":
          country = "Anguilla";
          break;
        case "AQ":
          country = "Antarctica";
          break;
        case "AG":
          country = "Antigua and Barbuda";
          break;
        case "AR":
          country = "Argentina";
          break;
        case "AM":
          country = "Armenia";
          break;
        case "AW":
          country = "Aruba";
          break;
        case "AU":
          country = "Australia";
          break;
        case "AT":
          country = "Austria";
          break;
        case "AZ":
          country = "Azerbaijan";
          break;
        case "BS":
          country = "Bahamas";
          break;
        case "BH":
          country = "Bahrain";
          break;
        case "BD":
          country = "Bangladesh";
          break;
        case "BB":
          country = "Barbados";
          break;
        case "BY":
          country = "Belarus";
          break;
        case "BE":
          country = "Belgium";
          break;
        case "BZ":
          country = "Belize";
          break;
        case "BJ":
          country = "Benin";
          break;
        case "BM":
          country = "Bermuda";
          break;
        case "BT":
          country = "Bhutan";
          break;
        case "BO":
          country = "Bolivia";
          break;
        case "BQ":
          country = "Bonaire";
          break;
        case "BA":
          country = "Bosnia Herzegovina";
          break;
        case "BW":
          country = "Botswana";
          break;
        case "IO":
          country = "Br. Indian Ocean Terr.";
          break;
        case "VG":
          country = "Br. Virgin Isds";
          break;
        case "BR":
          country = "Brazil";
          break;
        case "BN":
          country = "Brunei Darussalam";
          break;
        case "BG":
          country = "Bulgaria";
          break;
        case "BF":
          country = "Burkina Faso";
          break;
        case "BI":
          country = "Burundi";
          break;
        case "CV":
          country = "Cabo Verde";
          break;
        case "KH":
          country = "Cambodia";
          break;
        case "CM":
          country = "Cameroon";
          break;
        case "CA":
          country = "Canada";
          break;
        case "KY":
          country = "Cayman Isds";
          break;
        case "CF":
          country = "Central African Rep.";
          break;
        case "TD":
          country = "Chad";
          break;
        case "CL":
          country = "Chile";
          break;
        case "CN":
          country = "China";
          break;
        case "HK":
          country = "China, Hong Kong SAR";
          break;
        case "MO":
          country = "China, Macao SAR";
          break;
        case "CX":
          country = "Christmas Isds";
          break;
        case "CC":
          country = "Cocos Isds";
          break;
        case "CO":
          country = "Colombia";
          break;
        case "KM":
          country = "Comoros";
          break;
        case "CG":
          country = "Congo";
          break;
        case "CK":
          country = "Cook Isds";
          break;
        case "CR":
          country = "Costa Rica";
          break;
        case "CI":
          country = "Côte d'Ivoire";
          break;
        case "HR":
          country = "Croatia";
          break;
        case "CU":
          country = "Cuba";
          break;
        case "CW":
          country = "Curaçao";
          break;
        case "CY":
          country = "Cyprus";
          break;
        case "CZ":
          country = "Czechia";
          break;
        case "CS":
          country = "Czechoslovakia";
          break;
        case "KP":
          country = "Dem. People's Rep. of Korea";
          break;
        case "CD":
          country = "Dem. Rep. of the Congo";
          break;
        case "DK":
          country = "Denmark";
          break;
        case "DJ":
          country = "Djibouti";
          break;
        case "DM":
          country = "Dominica";
          break;
        case "DO":
          country = "Dominican Rep.";
          break;
        case "PK":
          country = "East and West Pakistan";
          break;
        case "EC":
          country = "Ecuador";
          break;
        case "EG":
          country = "Egypt";
          break;
        case "SV":
          country = "El Salvador";
          break;
        case "GQ":
          country = "Equatorial Guinea";
          break;
        case "ER":
          country = "Eritrea";
          break;
        case "EE":
          country = "Estonia";
          break;
        case "ET":
          country = "Ethiopia";
          break;
        case "EU":
          country = "EU-28";
          break;
        case "FO":
          country = "Faeroe Isds";
          break;
        case "FK":
          country = "Falkland Isds (Malvinas)";
          break;
        case "FJ":
          country = "Fiji";
          break;
        case "FI":
          country = "Finland";
          break;
        case "YE":
          country = "Fmr Arab Rep. of Yemen";
          break;
        case "DD":
          country = "Fmr Dem. Rep. of Germany";
          break;
        case "VD":
          country = "Fmr Dem. Rep. of Vietnam";
          break;
        case "YD":
          country = "Fmr Dem. Yemen";
          break;
        case "ET":
          country = "Fmr Ethiopia";
          break;
        case "DE":
          country = "Fmr Fed. Rep. of Germany";
          break;
        case "PC":
          country = "Fmr Pacific Isds";
          break;
        case "PA":
          country = "Fmr Panama, excl.Canal Zone";
          break;
        case "PZ":
          country = "Fmr Panama-Canal-Zone";
          break;
        case "VN":
          country = "Fmr Rep. of Vietnam";
          break;
        case "SD":
          country = "Fmr Sudan";
          break;
        case "SU":
          country = "Fmr USSR";
          break;
        case "YU":
          country = "Fmr Yugoslavia";
          break;
        case "FQ":
          country = "Fr. South Antarctic Terr.";
          break;
        case "FR":
          country = "France";
          break;
        case "GF":
          country = "French Guiana";
          break;
        case "PF":
          country = "French Polynesia";
          break;
        case "FM":
          country = "FS Micronesia";
          break;
        case "GA":
          country = "Gabon";
          break;
        case "GM":
          country = "Gambia";
          break;
        case "GE":
          country = "Georgia";
          break;
        case "DE":
          country = "Germany";
          break;
        case "GH":
          country = "Ghana";
          break;
        case "GI":
          country = "Gibraltar";
          break;
        case "GR":
          country = "Greece";
          break;
        case "GL":
          country = "Greenland";
          break;
        case "GD":
          country = "Grenada";
          break;
        case "GP":
          country = "Guadeloupe";
          break;
        case "GU":
          country = "Guam";
          break;
        case "GT":
          country = "Guatemala";
          break;
        case "GN":
          country = "Guinea";
          break;
        case "GW":
          country = "Guinea-Bissau";
          break;
        case "GY":
          country = "Guyana";
          break;
        case "HT":
          country = "Haiti";
          break;
        case "HM":
          country = "Heard Island and McDonald Islands";
          break;
        case "VA":
          country = "Holy See (Vatican City State)";
          break;
        case "HN":
          country = "Honduras";
          break;
        case "HU":
          country = "Hungary";
          break;
        case "IS":
          country = "Iceland";
          break;
        case "IN":
          country = "India";
          break;
        case "ID":
          country = "Indonesia";
          break;
        case "IR":
          country = "Iran";
          break;
        case "IQ":
          country = "Iraq";
          break;
        case "IE":
          country = "Ireland";
          break;
        case "IL":
          country = "Israel";
          break;
        case "IT":
          country = "Italy";
          break;
        case "JM":
          country = "Jamaica";
          break;
        case "JP":
          country = "Japan";
          break;
        case "JO":
          country = "Jordan";
          break;
        case "KZ":
          country = "Kazakhstan";
          break;
        case "KE":
          country = "Kenya";
          break;
        case "KI":
          country = "Kiribati";
          break;
        case "KW":
          country = "Kuwait";
          break;
        case "KG":
          country = "Kyrgyzstan";
          break;
        case "LA":
          country = "Lao People's Dem. Rep.";
          break;
        case "LV":
          country = "Latvia";
          break;
        case "LB":
          country = "Lebanon";
          break;
        case "LS":
          country = "Lesotho";
          break;
        case "LR":
          country = "Liberia";
          break;
        case "LY":
          country = "Libya";
          break;
        case "LT":
          country = "Lithuania";
          break;
        case "LU":
          country = "Luxembourg";
          break;
        case "MG":
          country = "Madagascar";
          break;
        case "MW":
          country = "Malawi";
          break;
        case "MY":
          country = "Malaysia";
          break;
        case "MV":
          country = "Maldives";
          break;
        case "ML":
          country = "Mali";
          break;
        case "MT":
          country = "Malta";
          break;
        case "MH":
          country = "Marshall Isds";
          break;
        case "MQ":
          country = "Martinique";
          break;
        case "MR":
          country = "Mauritania";
          break;
        case "MU":
          country = "Mauritius";
          break;
        case "YT":
          country = "Mayotte";
          break;
        case "MX":
          country = "Mexico";
          break;
        case "MN":
          country = "Mongolia";
          break;
        case "ME":
          country = "Montenegro";
          break;
        case "MS":
          country = "Montserrat";
          break;
        case "MA":
          country = "Morocco";
          break;
        case "MZ":
          country = "Mozambique";
          break;
        case "MM":
          country = "Myanmar";
          break;
        case "MP":
          country = "N Mariana Isds";
          break;
        case "NA":
          country = "Namibia";
          break;
        case "NR":
          country = "Nauru";
          break;
        case "NP":
          country = "Nepal";
          break;
        case "AN":
          country = "Neth Antilles";
          break;
        case "NL":
          country = "Netherlands";
          break;
        case "NC":
          country = "New Caledonia";
          break;
        case "NZ":
          country = "New Zealand";
          break;
        case "NI":
          country = "Nicaragua";
          break;
        case "NE":
          country = "Niger";
          break;
        case "NG":
          country = "Nigeria";
          break;
        case "NU":
          country = "Niue";
          break;
        case "NF":
          country = "Norfolk Isds";
          break;
        case "NO":
          country = "Norway";
          break;
        case "OM":
          country = "Oman";
          break;
        case "PK":
          country = "Pakistan";
          break;
        case "PW":
          country = "Palau";
          break;
        case "PA":
          country = "Panama";
          break;
        case "PG":
          country = "Papua New Guinea";
          break;
        case "PY":
          country = "Paraguay";
          break;
        case "PE":
          country = "Peru";
          break;
        case "PH":
          country = "Philippines";
          break;
        case "PN":
          country = "Pitcairn";
          break;
        case "PL":
          country = "Poland";
          break;
        case "PT":
          country = "Portugal";
          break;
        case "QA":
          country = "Qatar";
          break;
        case "KR":
          country = "Rep of Korea";
          break;
        case "MD":
          country = "Rep of Moldova";
          break;
        case "RE":
          country = "Réunion";
          break;
        case "RO":
          country = "Romania";
          break;
        case "RU":
          country = "Russian Federation";
          break;
        case "RW":
          country = "Rwanda";
          break;
        case "BL":
          country = "Saint Barthélemy";
          break;
        case "SH":
          country = "Saint Helena";
          break;
        case "KN":
          country = "Saint Kitts and Nevis";
          break;
        case "KN":
          country = "Saint Kitts, Nevis and Anguilla";
          break;
        case "LC":
          country = "Saint Lucia";
          break;
        case "SX":
          country = "Saint Maarten";
          break;
        case "PM":
          country = "Saint Pierre and Miquelon";
          break;
        case "VC":
          country = "Saint Vincent and the Grenadines";
          break;
        case "WS":
          country = "Samoa";
          break;
        case "SM":
          country = "San Marino";
          break;
        case "ST":
          country = "Sao Tome and Principe";
          break;
        case "SA":
          country = "Saudi Arabia";
          break;
        case "SN":
          country = "Senegal";
          break;
        case "RS":
          country = "Serbia";
          break;
        case "CS":
          country = "Serbia and Montenegro";
          break;
        case "SC":
          country = "Seychelles";
          break;
        case "SL":
          country = "Sierra Leone";
          break;
        case "SG":
          country = "Singapore";
          break;
        case "SK":
          country = "Slovakia";
          break;
        case "SI":
          country = "Slovenia";
          break;
        case "SB":
          country = "Solomon Isds";
          break;
        case "SO":
          country = "Somalia";
          break;
        case "ZA":
          country = "South Africa";
          break;
        case "GS":
          country = "South Georgia";
          break;
        case "SS":
          country = "South Sudan";
          break;
        case "ES":
          country = "Spain";
          break;
        case "LK":
          country = "Sri Lanka";
          break;
        case "PS":
          country = "State of Palestine";
          break;
        case "SD":
          country = "Sudan";
          break;
        case "SR":
          country = "Suriname";
          break;
        case "SZ":
          country = "Swaziland";
          break;
        case "SE":
          country = "Sweden";
          break;
        case "CH":
          country = "Switzerland";
          break;
        case "SY":
          country = "Syria";
          break;
        case "TJ":
          country = "Tajikistan";
          break;
        case "MK":
          country = "TFYR of Macedonia";
          break;
        case "TH":
          country = "Thailand";
          break;
        case "TL":
          country = "Timor-Leste";
          break;
        case "TG":
          country = "Togo";
          break;
        case "TK":
          country = "Tokelau";
          break;
        case "TO":
          country = "Tonga";
          break;
        case "TT":
          country = "Trinidad and Tobago";
          break;
        case "TN":
          country = "Tunisia";
          break;
        case "TR":
          country = "Turkey";
          break;
        case "TM":
          country = "Turkmenistan";
          break;
        case "TC":
          country = "Turks and Caicos Isds";
          break;
        case "TV":
          country = "Tuvalu";
          break;
        case "UG":
          country = "Uganda";
          break;
        case "UA":
          country = "Ukraine";
          break;
        case "AE":
          country = "United Arab Emirates";
          break;
        case "GB":
          country = "United Kingdom";
          break;
        case "TZ":
          country = "United Rep. of Tanzania";
          break;
        case "UM":
          country = "United States Minor Outlying Islands";
          break;
        case "UY":
          country = "Uruguay";
          break;
        case "VI":
          country = "US Virgin Isds";
          break;
        case "US":
          country = "United States";
          break;
        case "UZ":
          country = "Uzbekistan";
          break;
        case "VU":
          country = "Vanuatu";
          break;
        case "VE":
          country = "Venezuela";
          break;
        case "VN":
          country = "Viet Nam";
          break;
        case "WF":
          country = "Wallis and Futuna Isds";
          break;
        case "EH":
          country = "Western Sahara";
          break;
        case "WL":
          country = "World";
          break;
        case "YE":
          country = "Yemen";
          break;
        case "ZM":
          country = "Zambia";
          break;
        case "ZW":
          country = "Zimbabwe";
          break;

        default:
          country = "Unknown";
      }
      return country;
    },
    onUpdate(payload) {
      this.results = payload;
    },
    onUpdate2(payload) {
      this.results2 = payload;
    },
    onUpdate3(payload) {
      this.results3 = payload;
    },
    sendOtp() {
      //console.log("result ", this.results);
      this.phNo = this.results.formattedNumber;
      if (this.phNo.length < 6) {
        this.$store.commit(
          "setAlertMessage",
          "Invalid Phone Number/OTP Format !"
        );
      } else {
        //
        //let countryCode = "+234"; //india
        if (window.hasOwnProperty("cordova")) {
          //user using mobile phone
          cordova.plugins.firebase.auth
            .verifyPhoneNumber(this.phNo, 0)
            .then((verificationId) => {
              // pass verificationId to signInWithVerificationId
              this.confirmationResult = verificationId;
              this.$store.commit(
                "setAlertMessage",
                "SMS sent to your mobile Phone"
              );
            })
            .catch((error) => {
             
              this.$store.commit(
                "setAlertMessage",
                "Couldn't verify your phone. Error received: " + error
              );
            });

        }


        else {
          //user using browser 

          let appVerifier = this.appVerifier;

          firebase
            .auth()
            .signInWithPhoneNumber(this.phNo, appVerifier)
            .then((confirmationResult) => {
              window.confirmationResult = confirmationResult;
              // console.log("appVerifier ", appVerifier);
              this.$store.commit(
                "setAlertMessage",
                "SMS sent to your mobile Phone"
              );
            })
            .catch((error) => {
              this.$store.commit(
                "setAlertMessage",
                "Error ! SMS not sent. Error received " + error
              );
            });


        }





        let phoneNumber = this.phNo;
        if (this.getOS() == "Android" || this.getOS() == "iOS") {
          //console.log("phone section");



          //let phoneNumber = this.phNo;
        } else {

        }
      }
    },
    //
    verifyOtp() {
      if (this.phNo.length < 6 || this.otp.length != 6) {
        this.$store.commit(
          "setAlertMessage",
          "Invalid Phone Number/OTP Format !"
        );
      } else {
        //
        let vm = this;
        let code = this.otp;
        if (window.hasOwnProperty("cordova")) {
        //if (this.getOS() == "Android" || this.getOS() == "iOS") {
          //console.log("phone section");
          cordova.plugins.firebase.auth
            .signInWithVerificationId(this.confirmationResult, code)
            .then(() => {
              //pass verificationId to signInWithVerificationId
              var payload = {};
              payload.country = this.getCountryName(this.results.countryCode);
              payload.phonenumber = this.results.formattedNumber;
              var mydata = JSON.stringify(payload);
              //   console.log(mydata);
              this.$store.commit("setAlertMessage", "Phone Verified");
              this.$f7router.navigate("/signup/" + encodeURIComponent(mydata));
            })
            .catch((error) => {
              this.$store.commit(
                "setAlertMessage",
                "Couldn't verify your phone " + error.message
              );
            });
        } else {
          //connsole.log("web section");
          window.confirmationResult
            .confirm(code)
            .then((result) => {
              var payload = {};
              payload.country = this.getCountryName(this.results.countryCode);
              payload.phonenumber = this.results.formattedNumber;
              var mydata = JSON.stringify(payload);
              // console.log(mydata);
              this.$store.commit("setAlertMessage", "Phone Verified");
              this.$f7router.navigate("/signup/" + encodeURIComponent(mydata));
            })
            .catch((error) => {
              this.$store.commit(
                "setAlertMessage",
                "Couldn't verify your phone " + error.message
              );
            });
        }
      }
    },
    initReCaptcha() {
      setTimeout(() => {
        let vm = this;
        window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
          "recaptcha-container",
          {
            size: "invisible",
            callback: function (response) {
              // reCAPTCHA solved, allow signInWithPhoneNumber.
              // ...
            },
            "expired-callback": function () {
              // Response expired. Ask user to solve reCAPTCHA again.
              // ...
            },
          }
        );
        //
        this.appVerifier = window.recaptchaVerifier;
      }, 1000);
    },
  },
  computed: {
    resultsTable() {
      //console.log(this.results);
      return Object.keys(this.results);
    },
    resultsTable2() {
      return Object.keys(this.results2);
    },
    resultsTable3() {
      return Object.keys(this.results3);
    },
  },
  created() {
    this.initReCaptcha();
  },
};
</script>

<style scoped>
.page {
  font-family: "centabel";
  background: url("https://penpalamerica.com/images/coversmall.png") no-repeat center fixed !important;
  background-size: cover !important;
}

.page-one {
  width: 30%;
  --f7-page-bg-color: red;
  margin-top: 50px;
  margin-left: 450px;
}

@media only screen and (min-width: 700px) and (max-width: 1024px) {
  .page-one {
    width: 70%;
    --f7-page-bg-color: red;
    margin-top: 400px;
    margin-left: 150px;
    font-size: 2em;
  }

  .halfcol {
    width: 100%;
    height: auto;
    font-size: 3em;
  }
}

@media only screen and (max-width: 600px) {
  .page-one {
    width: 70%;
    --f7-page-bg-color: red;
    margin-top: 80px;
    margin-left: 70px;
  }
}

.halfcol {
  width: 20%;
}

@media only screen and (max-width: 600px) {
  .halfcol {
    width: 70%;
  }
}
</style>