<template>
  <f7-page
    class="page-one"
    name="signin"
    no-swipeback
    login-screen
    v-if="pageStatus"
  >
    <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
          class="list media-list"
          style="text-align: center; color: red; font-size: smaller"
        >
          <label class="item-checkbox item-content">
            <input
              type="checkbox"
              name="demo-media-checkbox"
              @change="onUserConsentChange"
            />
            <i class="icon icon-checkbox"></i>
            <p>
              By clicking on the checkbox, you agree with our terms and
              conditions below.
            </p>
          </label>
        </div>

        <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/terms.html" external
            >Terms and Conditions |
          </f7-link>

          <f7-link href="https://penpalamerica.com/privacy.html" external
            >Privacy</f7-link
          >
        </div>
      </f7-block>
    </div>
  </f7-page>
</template>

<script>
import { f7 } from "framework7-vue";
import moment from "moment";
import Framework7 from "framework7/framework7.esm.bundle.js";
import { setInterval, clearInterval } from "timers";
import { mixin } from "../../js/mixin";
import firebase from "firebase";
import { title } from "process";
export default {
  data() {
    return {
      user_agree_general: false,
      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: {
    onUserConsentChange: function (e) {
      var self = this;
      var value = e.target.value;
      if (e.target.checked) {
        self.user_agree_general = true;
      } else {
        self.user_agree_general = false;
      }
    },
    myFunction() {
      //console.log("checkbook clicked");
    },
    userConsent() {
      var payload = {};
      console.log("james");
      // 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) {
        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;
    },

    async forgetPassword() {
      // console.log("forgetPassword");
      const self = this;
      var auth = firebase.auth();
      if (this.email != null) {
        var response = "";
        var payload = {};
        payload.email = this.email;
        payload.domain = "penpalamerica.com";
        response = await self.$store.dispatch("resetPassword", payload);
        console.log(response);
        if (response == "0") {
          self.$store.commit(
            "setAlertMessage",
            `We have sent an email to ${payload.email} to reset your password`
          );
        } else {
          self.$store.commit(
            "setAlertMessage",
            "We cannot find account associated with the email"
          );
        }
      } else {
        self.$store.commit("setAlertMessage", "Please enter your email");
      }
    },
    color(timeleft) {
      if (timeleft <= 0) {
        return "#007aff";
      } else {
        return "gray";
      }
    },
    resendEmail() {
      if (this.email == null) {
        this.$store.commit(
          "setAlertMessage",
          "Please provide your valid email"
        );

        return;
      }
      const self = this;
      //console.log(self.time_left);
      if (this.time_left <= 0) {
        // console.log("trigger resend");
        var payload = {};
        payload.email = this.email;
        payload.domain = "penpalamerica.com";
        self.$store.dispatch("sendVerification", payload);
        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() {
      if (!this.user_agree_general) {
        this.$store.commit(
          "setAlertMessage",
          "Please agree to the terms and conditions before continuing with signin"
        );
        return;
      }
      //let userTotal = await this.$store.dispatch("userMigration");
      //console.log("done", userTotal);
      //return;
      //let userTotal = await this.$store.dispatch("getAllUsersMigration");
      // console.log("total", userTotal);
      //6GZxd7uekNfCrEjkpMkqxLgUoCH2
      //return;
      //show dialogue preloader
      // await this.$store.dispatch("getAllUsersMigration2");
      //await this.$store.dispatch(
      //"deleteOldAccount",
      //"dsMA1kCq3dTt7INMTaJyS8Ry9tK2"
      //);
      //console.log("done");

      // });
      //individualMigration();
      //console.log("done");
      //return;
      //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);
        let userLoginStatus = await this.$store.dispatch(
          "signInMySQL",
          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();
    },
    individualMigration() {
      firebase
        .database()
        .ref("users")
        .child("6HKyTaBMx1NyTgSHlzNJM6uafwH2")
        .once("value", (member) => {
          var date = new Date(member.dateCreated);
          var dateCreated =
            date.getFullYear() +
            "/" +
            (date.getMonth() + 1) +
            "/" +
            date.getDate() +
            " " +
            date.getHours() +
            ":" +
            date.getMinutes() +
            ":" +
            date.getSeconds();

          var date = new Date(member.lastSeen);
          var lastSeen =
            date.getFullYear() +
            "/" +
            (date.getMonth() + 1) +
            "/" +
            date.getDate() +
            " " +
            date.getHours() +
            ":" +
            date.getMinutes() +
            ":" +
            date.getSeconds();

          var postData = {
            birthDate: member.birthDate,
            country: member.country,
            dateCreated: dateCreated,
            email: member.email,
            emailverified: member.emailverified,
            gender: member.gender,
            lastSeen: lastSeen,
            location: member.location,
            name: member.name,
            phonenumber: member.phonenumber,
            photoUpload: member.photoUpload,
            photo_url1: member.photo_url,
            profileMessage: member.profileMessage,
            userToken: member.userToken,
            userType: member.userType,
            domain: "penpalamerica.com",
          };

          Framework7.request.post(
            "https://penpalamerica.com/penpal/migrationpenpal.php",
            postData,
            async function (data) {
              //var obj = JSON.parse(data);
              //console.log("data", data);
              //mark read as migrated
              if (data == "-1") {
                await firebase
                  .database()
                  .ref("users")
                  .child("6HKyTaBMx1NyTgSHlzNJM6uafwH2")
                  .update({
                    migrated: true,
                  })
                  .catch(function (error) {
                    console.log(error.message);
                  });
              }
              //self.contacts = obj;
              //console.log(self.todayblogger.name);
            }
          );
        });
    },
  },
  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: 40px;
    margin-left: 70px;
  }
}
.halfcol {
  width: 20%;
}

@media only screen and (max-width: 600px) {
  .halfcol {
    width: 70%;
  }
}
.align-center {
  margin-top: 200px;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
  /*background: #1b1e24;*/
  /* SIDEBAR */
  /* END SIDEBAR */
  /* CONTENT */
  /* END CONTENT */
  /* RTL CONTENT MODE */
  /* END RTL CONTENT MODE */
}
</style>>