<template>
  <f7-page name="signup" no-swipeback login-screen v-if="pageStatus">
    <f7-login-screen-title>Sign Up</f7-login-screen-title>
    <f7-navbar title="Sign up" back-link="Back"></f7-navbar>
    <div class="wrapper">
      <img
        class="image--cover"
        :src="image_url"
        alt
        @click="launchFilePicker"
      />
    </div>
    <div class="list inline-labels no-hairlines-md">
      <ul>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Name</div>
            <div class="item-input-wrap">
              <input
                :value="name"
                @input="name = $event.target.value"
                type="text"
                placeholder="Display name"
                required
                validate
              />
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>

        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">E-mail</div>
            <div class="item-input-wrap">
              <input
                :value="email"
                @input="email = $event.target.value"
                type="email"
                placeholder="Your e-mail"
                required
                validate
              />
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Gender</div>
            <div class="item-input-wrap input-dropdown-wrap">
              <select
                :value="gender"
                @input="gender = $event.target.value"
                placeholder="Please choose..."
              >
                <option value="M">Male</option>
                <option value="F">Female</option>
              </select>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Password</div>
            <div class="item-input-wrap">
              <input
                :value="password"
                @input="password = $event.target.value"
                type="password"
                placeholder="Your password"
              />
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>

        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Birthday</div>
            <div class="item-input-wrap">
              <input
                :value="dateofbirth"
                @input="dateofbirth = $event.target.value"
                type="date"
                placeholder="Please choose..."
              />
            </div>
          </div>
        </li>

        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Location</div>
            <div class="item-input-wrap">
              <input
                :value="location"
                @input="location = $event.target.value"
                type="text"
                placeholder="Your Present location"
              />
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>

        <span :v-if="valid_inputs"></span>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Message</div>
            <div class="item-input-wrap">
              <textarea
                :value="profileMessage"
                @input="profileMessage = $event.target.value"
                class="resizable"
                placeholder="Your Profile Message"
                maxlength="200"
              ></textarea>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- changes end here -->
    <div>
      <f7-block>
        <f7-button fill @click="signUp">Sign up</f7-button>
        <input
          type="file"
          ref="file"
          style="display: none"
          @change="onFilePicked"
        />

        <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
        >
      </f7-block>
    </div>
  </f7-page>
</template>

<script>
// import {
//     setTimeout
// } from 'timers';
import { mixin } from "../../js/mixin";
import moment from "moment";
//import axios from "axios";
import {
  f7Page,
  f7LoginScreenTitle,
  f7List,
  f7ListItem,
  f7ListButton,
  f7BlockFooter,
  f7ListInput,
} from "framework7-vue";

export default {
  mixins: [mixin],
  f7Page,
  f7LoginScreenTitle,
  f7List,
  f7ListItem,
  f7ListButton,
  f7BlockFooter,
  f7ListInput,
  data() {
    return {
      name: null,
      email: null,
      password: null,
      phonenumber: null,
      country: null,
      gender: null,
      lastseen: null,
      location: null,
      profileMessage: null,
      dateofbirth: null,
      tempPayload: null,
    };
  },
  computed: {
    pageStatus() {
      return this.$store.getters.pageStatus;
    },
    image_url() {
      return this.$store.getters.image_url;
    },
    files() {
      return this.$store.getters.files;
    },
    signed_up() {
      return this.$store.getters.signed_up;
    },
    valid_inputs() {
      return this.$store.getters.valid_inputs;
    },
  },
  watch: {
    signed_up(value) {
      if (value == true) {
        this.$f7router.navigate("/signin/");
      }
    },
    valid_inputs(value) {
      if (value == true) {
        //completeRegistration();
        // console.log("I am here1");
        // console.log(this.tempPayload.name);
      }
    },
  },

  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;
    },

    launchFilePicker() {
      this.$refs.file.click();
      //console.log("this.$refs.file.click();", this.$refs.file.click());
      // event.target.files[0];
      //console.log("event.target.files[0]", event.target.files[0]);
    },
    onFilePicked() {
      //read the image file
      this.$store.dispatch("readFile", "setImageURL");
    },
    async signUp() {
      var userToken = "web";
      // if (this.getOS() == "Android" || this.getOS() == "iOS") {

      const self = this;
      var payload = {};
      payload.phonenumber = this.phonenumber;
      payload.country = this.country;
      payload.userToken = userToken;

      //name validation
      if (this.name) {
        if (this.name.length < 3) {
          self.$store.dispatch(
            "verifyInputs",
            "Name must be 3 characters long minimum)"
          );
          self.$store.dispatch("resetVerifyInputs");
          return;
        } else {
          payload.name = this.name;
        }
      } else {
        self.$store.dispatch(
          "verifyInputs",
          "Enter Your Name ( 3 characters long minimum)"
        );
        self.$store.dispatch("resetVerifyInputs");
        return;
      }

      //email validation
      if (this.email) {
        payload.email = this.email;
      } else {
        self.$store.dispatch("verifyInputs", "Enter Valid Email Address");
        self.$store.dispatch("resetVerifyInputs");
        return;
      }

      //password  validation
      if (this.password) {
        if (this.password.length < 6) {
          self.$store.dispatch(
            "verifyInputs",
            "Password must be 6 characters long minimum)"
          );
          self.$store.dispatch("resetVerifyInputs");
          return;
        } else {
          payload.password = this.password;
        }
      } else {
        self.$store.dispatch(
          "verifyInputs",
          "Enter Your Password ( 6 characters long minimum )"
        );
        self.$store.dispatch("resetVerifyInputs");
        return;
      }

      //age validation
      if (this.dateofbirth) {
        var birthdate = new Date(this.dateofbirth);
        var cur = new Date();
        var diff = cur - birthdate; // This is the difference in milliseconds
        var age = Math.floor(diff / 31557600000);
        //console.log("age " + age);
        if (age < 18) {
          self.$store.dispatch("verifyInputs", "Service is for Persons 18+");
          self.$store.dispatch("resetVerifyInputs");
          return;
        } else {
          //payload.dateofbirth = moment(this.dateofbirth, format("YYYY/MM/DD/"));
          payload.dateofbirth = moment(String(this.dateofbirth)).format(
            "YYYY/MM/DD/"
          );
        }
      } else {
        self.$store.dispatch("verifyInputs", "Please Enter your age");
        self.$store.dispatch("resetVerifyInputs");
        return;
      }
      // console.log("dates", payload.dateofbirth);
      // return;
      //locatiom validation
      if (this.location) {
        if (this.location.length < 2) {
          self.$store.dispatch(
            "verifyInputs",
            "location must be 2 characters long minimum)"
          );
          self.$store.dispatch("resetVerifyInputs");
          return;
        } else {
          payload.location = this.location;
        }
      } else {
        self.$store.dispatch(
          "verifyInputs",
          "Enter Your location ( 2 characters long minimum )"
        );
        self.$store.dispatch("resetVerifyInputs");
        return;
      }

      //gender validation
      if (this.gender) {
        payload.gender = this.gender;
      } else {
        self.$store.dispatch("verifyInputs", "Select Gender from the list");
        self.$store.dispatch("resetVerifyInputs");
        return;
      }

      //country validation
      // if (this.country) {
      // payload.country = this.country;
      //} else {
      // self.$store.dispatch("verifyInputs", "Select Country from the list");
      //self.$store.dispatch("resetVerifyInputs");
      //return;
      // }

      //profile Message validation
      if (this.profileMessage) {
        if (this.profileMessage.length < 10) {
          self.$store.dispatch(
            "verifyInputs",
            "Profile Message must be 10 characters long minimum)"
          );
          self.$store.dispatch("resetVerifyInputs");
          return;
        } else {
          payload.profileMessage = this.profileMessage;
        }
      } else {
        self.$store.dispatch(
          "verifyInputs",
          "Enter Profile Message ( 10 characters long minimum)"
        );
        self.$store.dispatch("resetVerifyInputs");
        return;
      }

      //check if country exist
      //remove poison before checking
      // console.log("check1");
      //this.$store.dispatch("countryExist", this.country);
      //console.log("check2");
      //   console.log("this.image_url", this.image_url);
      payload.photoURL = this.image_url;
      payload.userType = "1";
      payload.userStatus = "offline";
      payload.lastSeen = Date.now();
      payload.photoUpload = "false";
      //console.log("lastSeen", payload.lastSeen);

      if (this.valid_inputs) {
        if (self.files) {
          // console.log("photo is uploaded", self.files[0]);
          var url1 = await self.$store.dispatch(
            "uploadImageMySQL",
            self.files[0]
          );

          console.log("image not surURL", url1);
          payload.photoUpload = "true";
          payload.photoURL = url1;
        }
      }
      //this.$store.dispatch("signUp", payload);
      var myCountryData = this.country,
        myCountryData = myCountryData.replace(".", "");
      myCountryData = myCountryData.replace("#", "");
      myCountryData = myCountryData.replace("$", "");
      myCountryData = myCountryData.replace("[", "");
      myCountryData = myCountryData.replace("]", "");

      if (payload.gender == "M") {
        payload.genderSearch = "F";
      } else {
        payload.genderSearch = "M";
      }
      var postData = {
        photoUpload: payload.photoUpload,
        password: payload.password,
        name: payload.name,
        email: payload.email,
        payment_method:payload.email,
        phonenumber: this.phonenumber,
        location: payload.location,
        profileMessage: payload.profileMessage,
        country: myCountryData,
        gender: payload.gender,
        genderSearch: payload.genderSearch,
        birthDate: payload.dateofbirth,
        photo_url1: payload.photoURL,
        domain: "penpalamerica.com",
      };

      let config = {
        header: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "POST, GET, OPTIONS, PUT, DELETE",
        },
      };

      this.$f7.request.post(
        "https://penpalamerica.com/penpal/registerpenpal.php",
        postData,
        function (data) {
          console.log(data);
          if (data == "0") {
            //  self.$store.dispatch("sendVerification", payload.email);
            self.$store.commit("setSignedUp", true);
            self.$store.commit("setPageStatus", true);

            self.$store.commit(
              "setAlertMessage",
              `A verification email has been sent to ${payload.email}`
            );

            self.$f7router.navigate("/firstpage/");
            return;
          }
          if (data == "-1") {
            self.$store.commit(
              "setAlertMessage",
              "Database Error! Please try again or contact Admin"
            );
            return;
          }
          if (data == "1") {
            self.$store.commit(
              "setAlertMessage",
              "User already exists (email)"
            );
            return;
          }

          if (data == "3") {
            self.$store.commit(
              "setAlertMessage",
              "User already exists (phonenumber)"
            );
            return;
          }

          if (data == "2") {
            self.$store.commit(
              "setAlertMessage",
              "Some SignUp Fields are misssing"
            );
            return;
          }

          self.$store.commit(
            "setAlertMessage",
            "Unknow Error Occurred during registration. Please try later."
          );
        } //end of post
      );
      // } else {
      //input not correct
      //console.log("I am here4");
      // self.$store.dispatch("resetVerifyInputs");
      //}
    },
  },
  created() {
    this.$store.commit("setSignedUp", false);
    let param = this.$f7route.params.phone; // decodeURIComponent(this.$f7route.params.frd);
    let mydata = JSON.parse(param);
    this.phonenumber = mydata.phonenumber;
    this.country = mydata.country;
    //console.log("signin received", JSON.stringify(mydata));
  },
};
</script>

<style scoped>
.wrapper {
  text-align: center;
}

.image--cover {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 20px;
  object-fit: cover;
  object-position: center;
}
</style>