<template>
  <f7-page class="page-one" name="signin" no-swipeback login-screen>
    <f7-login-screen-title>Penpal America</f7-login-screen-title>
    <div>
      <f7-list no-hairlines-md>
        <f7-list-input
          :value="email"
          @input="email = $event.target.value"
          label="E-mail"
          type="email"
          placeholder="Your e-mail"
          clear-button
          validate
        ></f7-list-input>

        <f7-list-input
          :value="password"
          @input="password = $event.target.value"
          label="Password"
          type="password"
          placeholder="Your password"
          clear-button
        ></f7-list-input>
      </f7-list>

      <f7-block>
        <f7-button fill @click="signIn" open-confirm>Sign in</f7-button>
        <br />
        <div style="text-align: center">
          <f7-link
            v-if="show_resend_email"
            @click="resendEmail"
            :color="color(time_left)"
          >
            Resend Confirmation Email
            <span v-if="time_left > 0">&nbsp; {{ time_left }}</span>
          </f7-link>
          <br />
          <f7-link @click="userConsent">Don't have an account? Sign up</f7-link>
          <br />
          <f7-link @click="forgetPassword">Forget Password</f7-link>
          <br />
          <!--
          <f7-link href="https://penpalamerica.com/" external
            >Goto Home
          </f7-link>
          -->
        </div>
      </f7-block>
    </div>
  </f7-page>
</template>

<script>
import { f7 } from "framework7-vue";
import { setInterval, clearInterval } from "timers";
import { mixin } from "../../js/mixin";
import firebase from "firebase";
import { title } from "process";
export default {
  data() {
    return {
      email: null,
      password: null,
      time_left: -1,
      app_agree: false,
    };
  },
  mixins: [mixin],
  computed: {
    show_resend_email() {
      return this.$store.getters.show_resend_email;
    },
    pageStatus() {
      return this.$store.getters.pageStatus;
    },
  },
  methods: {
    myFunction() {
      //console.log("checkbook clicked");
    },
    userConsent() {
      var payload = {};
      payload.country = "Nigeria";
      payload.phonenumber = "2348022225545";
      var mydata = JSON.stringify(payload);
      //   console.log(mydata);
      this.$store.commit("setAlertMessage", "Phone Verified");
      this.$f7router.navigate("/signup/" + encodeURIComponent(mydata));

      return;
      var user_agree = false;
      //console.log("User consent");
      var dialog = this.$f7.dialog
        .create({
          title: "App User's Consent Required",
          text: "",
          content:
            "<div class='page' data-page='home' style='height: 300px; position:relative'>" +
            "<div class='page-content infinite-scroll-content' style='overflow: auto'>" +
            "<div class='list simple-list'>" +
            "<h2>Privacy Policy</h2>" +
            "<p>Swift Alliance builds the Penpal America App as a social network app. This SERVICE is provided by Swift Alliance at no cost and is intended for use as is.</p>" +
            "<p> " +
            "This page is used to inform visitors regarding " +
            "our policies with the collection, use, and " +
            "disclosure of Personal Information if anyone decided to use " +
            "our Service. " +
            "  </p> <p> " +
            "If you choose to use our Service, then you agree " +
            "to the collection and use of information in relation to this " +
            "policy. The Personal Information that we collect is " +
            "used for providing and improving the Service. " +
            "we will not use or share your " +
            "information with anyone except as described in this Privacy " +
            "Policy. " +
            "  </p> <p> " +
            "The terms used in this Privacy Policy have the same meanings " +
            "as in our Terms and Conditions, which is accessible at " +
            "Penpal America unless otherwise defined in this Privacy " +
            "Policy. " +
            "  </p> <p><strong>Information Collection and Use</strong></p> <p> " +
            "For a better experience, while using our Service, " +
            "we may require you to provide us with certain " +
            "personally identifiable information, including but not limited to Contacts in your Phonebook,Your Phone Number,Your Profile Picture. The " +
            "information that we request will be " +
            "securely saved on our secure Servers, we will never share these information without your permission. " +
            "<br> " +
            " your name, number, and your profile Picture will be available publicly to other users. " +
            "  </p> <p> " +
            "The app does use third party services that may collect " +
            "information used to identify you. " +
            "</p><div><p> " +
            "we want to inform you that whenever " +
            "you use our Service, in a case of an error in the " +
            "app we collect data and information (through third " +
            "party products) on your phone called Log Data. This Log Data " +
            "may include information such as your device Internet " +
            "Protocol (“IP”) address, device name, operating system " +
            "version, the configuration of the app when utilizing " +
            "our Service, the time and date of your use of the " +
            "Service, and other statistics. " +
            "  </p>  " +
            "  <p><strong>Permissions we request</strong></p> <p> " +
            "<ul> " +
            "  <li>Contacts: to be able to communicate with your Friends that are in your Contacts</li> " +
            "  <li>Camera: to be able to Take Pictures/Videos and to be able to make Video Calls.</li> " +
            "  <li>Microphpone: to be able to send Voice Messages and also to be able to make Voice/Video Calls.</li> " +
            "  <li>Storage: to save the Sent/Received Files in your Device</li> " +
            "</ul> " +
            "  </p> " +
            " " +
            "  <p><strong>Cookies</strong></p> <p> " +
            "Cookies are files with a small amount of data that are " +
            "commonly used as anonymous unique identifiers. These are " +
            "sent to your browser from the websites that you visit and " +
            "are stored on your device's internal memory. " +
            "  </p> <p> " +
            "This Service does not use these “cookies” explicitly. " +
            "However, the app may use third party code and libraries that " +
            "use “cookies” to collect information and improve their " +
            "services. You have the option to either accept or refuse " +
            "these cookies and know when a cookie is being sent to your " +
            "device. If you choose to refuse our cookies, you may not be " +
            "able to use some portions of this Service. " +
            "  </p> <p><strong>Service Providers</strong></p> <p> " +
            "we may employ third-party companies " +
            "and individuals due to the following reasons: " +
            "  </p> <ul><li>To facilitate our Service;</li> <li>To provide the Service on our behalf;</li> <li>To perform Service-related services; or</li> <li>To assist us in analyzing how our Service is used.</li></ul> <p> " +
            "we want to inform users of this " +
            "Service that these third parties have access to your " +
            "Personal Information. The reason is to perform the tasks " +
            "assigned to them on our behalf. However, they are obligated " +
            "not to disclose or use the information for any other " +
            "purpose. " +
            "  </p> <p><strong>Security</strong></p> <p> " +
            "we value your trust in providing us " +
            "your Personal Information, thus we are striving to use " +
            "commercially acceptable means of protecting it. But remember " +
            "that no method of transmission over the internet, or method " +
            "of electronic storage is 100% secure and reliable, and " +
            "we cannot guarantee its absolute security. " +
            "  </p> <p><strong>Links to Other Sites</strong></p> <p> " +
            "This Service may contain links to other sites. If you click " +
            "on a third-party link, you will be directed to that site. " +
            "Note that these external sites are not operated by " +
            "us. Therefore, we strongly advise you to " +
            "review the Privacy Policy of these websites. " +
            "we have no control over and assume no " +
            "responsibility for the content, privacy policies, or " +
            "practices of any third-party sites or services. " +
            "  </p> <p><strong>Children’s Privacy</strong></p> <p> " +
            "These Services do not address anyone under the age of 13. " +
            "we do not knowingly collect personally " +
            "identifiable information from children under 13. In the case " +
            "we discover that a child under 13 has provided " +
            "us with personal information, " +
            "we immediately delete this from our servers. If you " +
            "are a parent or guardian and you are aware that your child " +
            "has provided us with personal information, please contact " +
            "us so that we will be able to do " +
            "necessary actions. " +
            "  </p> <p><strong>Changes to This Privacy Policy</strong></p> <p> " +
            "we may update our Privacy Policy from " +
            "time to time. Thus, you are advised to review this page " +
            "periodically for any changes. we will " +
            "notify you of any changes by posting the new Privacy Policy " +
            "on this page. These changes are effective immediately after " +
            "they are posted on this page. " +
            "  </p> <p><strong>Contact Us</strong></p> <p> " +
            "If you have any questions or suggestions about " +
            "our Privacy Policy, do not hesitate to contact " +
            "us at support@penpalamerica.com " +
            "  </p>  " +
            "<div class='list media-list'>" +
            "<label class='item-checkbox item-content'>" +
            "<input type='checkbox' name='demo-media-checkbox' value ='1' />" +
            "<i class='icon icon-checkbox'></i>" +
            "<p>I agree with the above conditions.</p>" +
            "</label>" +
            "</div>" +
            "</div>" +
            "<div class='preloader infinite-scroll-preloader'></div>" +
            "</div>" +
            "</div>",

          buttons: [{ text: "Decline", close: true }, { text: "I Agree" }],
          onClick: (dialog, index) => {
            if (index == 1) {
              if (user_agree) {
                const app = this.$f7;
                //var payload = {};
                //payload.profileMessage = response;
                //this.$store.dispatch("deleteAccount");
                this.$f7router.navigate("/phoneverify/");
                this.$f7.dialog.close();
                app.panel.close();
              } else {
                this.$store.commit(
                  "setAlertMessage",
                  "Scroll to bottom page to accept Terms & Conditions before continuing. "
                );
              }
            } else {
            }
          },
          on: {
            open: function () {
              //console.log("OPEN");
            },
          },
        })
        .open();
      var $ = this.Dom7;
      $('[name="demo-media-checkbox"]').on("change", function (e) {
        var self = this;
        if (e.target.checked) {
          user_agree = true;
        } else {
          user_agree = false;
        }
      });
    },
    onCheckBoxChange() {
      // console.log("am here");
    },
    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;
    },

    forgetPassword() {
      // console.log("forgetPassword");
      const self = this;
      var auth = firebase.auth();
      if (this.email != null) {
        auth
          .sendPasswordResetEmail(this.email)
          .then(function () {
            // Email sent.
            self.$store.commit(
              "setAlertMessage",
              "A reset email has been sent to your inbox"
            );
          })
          .catch(function (error) {
            self.$store.commit("setAlertMessage", error);
          });
      } else {
        self.$store.commit("setAlertMessage", "Please enter your email");
      }
    },
    color(timeleft) {
      if (timeleft <= 0) {
        return "#007aff";
      } else {
        return "gray";
      }
    },
    resendEmail() {
      const self = this;
      //console.log(self.time_left);
      if (this.time_left <= 0) {
        // console.log("trigger resend");
        self.$store.dispatch("sendVerification");
        self.countDown();
      }
    },
    countDown() {
      const self = this;
      self.time_left = 20;
      var timer = setInterval(function () {
        self.time_left -= 1;
        //console.log("time left", self.time_left);
        if (self.time_left <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    },
    async signIn() {
      //let userTotal = await this.$store.dispatch("getAllUsersMigration");
      // console.log("total", userTotal);

      //return;
      //show dialogue preloader
      // await this.$store.dispatch("getAllUsersMigration2");
      //await this.$store.dispatch(
      //"deleteOldAccount",
      //"dsMA1kCq3dTt7INMTaJyS8Ry9tK2"
      //);
      //console.log("done");
      //return;

      //firebase;
      //.database()
      //.ref("users")
      //.child("Vzj04AjlpDYOBbLLjWEDCh1CuFJ2")
      //.on("value", (snapshot) => {
      //commit('setUserDetails', snapshot.val())
      // var newPostKey = firebase.database().ref().child("posts").push().key;
      // firebase.database().ref("AbC").child(newPostKey).set({
      // userType: "3",
      //});
      // });

      //console.log("done", newPostKey);
      //return;
      //console.log("app_db_version", this.app_db_version);
      if (window.hasOwnProperty("cordova")) {
        // console.log("nosa");
        let network_status = await this.$store.dispatch("checkConnection");

        //console.log("network_status", network_status);
        if (network_status == "offline") {
          this.$store.commit(
            "setAlertMessage",
            "It seems you are offline. Kindly check internet connection to continue..."
          );
          return;
        }
      }
      if (this.email != null && this.password != null) {
        var payload = {};
        payload.email = this.email;
        payload.password = this.password;
        //await this.$store.dispatch("signIn", payload);
        //console.log("userID", firebase.auth().currentUser.uid);

        // console.log("payload.email", payload.email);
        f7.dialog.preloader(
          "Logging you to the App.<br>First time might take long.<br>Please wait..."
        );
        let userLoginStatus = await this.$store.dispatch("signIn", payload);
        f7.dialog.close();

        if (userLoginStatus == "1") {
          this.$store.commit("setAlertMessage", "Please Verify Your Email...");
        }
      } else {
        this.$store.commit(
          "setAlertMessage",
          "Provide valid email and password to continue... "
        );
      }
      //f7.dialog.close();
    },
  },
  created() {},
};
</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%;
  }
}
.align-center {
  margin-top: 300px;
  margin-left: 50px;
  margin-right: 50px;
  position: relative;
  /*background: #1b1e24;*/
  /* SIDEBAR */
  /* END SIDEBAR */
  /* CONTENT */
  /* END CONTENT */
  /* RTL CONTENT MODE */
  /* END RTL CONTENT MODE */
}
</style>>