<template>
  <div class="wrapper">
    <f7-page name="signup">
      <f7-navbar title="Sign up" back-link="Back"></f7-navbar>
      <div class="wrapper">
        <img class="image--cover" :src="image_url" alt @click="launchFilePicker" />
      </div>
      <!-- changes start here -->
      <div class="block-title">
        <h2>Registration Page</h2>
      </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://citygists.com/terms.html" external>Terms and Conditions</f7-link>
          <br />
          <f7-link href="https://citygists.com/privacy.html" external>Privacy</f7-link>
        </f7-block>
      </div>
    </f7-page>
  </div>
</template>

<script>
// import {
//     setTimeout
// } from 'timers';
import { mixin } from "../../js/mixin";
import firebase from "firebase";
export default {
  mixins: [mixin],
  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: {
    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();
    },
    onFilePicked() {
      //read the image file
      this.$store.dispatch("readFile", "setImageURL");
    },
    signUp() {
      var userToken = "web";
      if (this.getOS() == "Android" || this.getOS() == "iOS") {
        cordova.plugins.firebase.messaging
          .getInstanceId()
          .then(function(instanceId) {
            console.log("Got instanceId: ", instanceId);

            cordova.plugins.firebase.messaging.getToken().then(function(token) {
              // console.log("Got device token: ", token);
              userToken = token;
            });
          });
        cordova.plugins.firebase.messaging.subscribe(payload.country);
      }

      const self = this;
      var payload = {};
      var payloadGroup = {};
      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 = this.dateofbirth;
        }
      } else {
        self.$store.dispatch("verifyInputs", "Please Enter your age");
        self.$store.dispatch("resetVerifyInputs");
        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
      this.$store.dispatch("countryExist", this.country);
      payload.photoURL = this.image_url;
      payload.userType = "1";
      payload.userStatus = "offline";
      payload.lastSeen = firebase.database.ServerValue.TIMESTAMP;

      if (this.valid_inputs) {
        //console.log("I am here3");
        if (self.files) {
          self.$store.dispatch("uploadFile", "profile/").then(url => {
            payload.photoURL = url;
            self.$store.dispatch("signUp", payload);
          });

          //send to mysal database
          //console.log("http");
          var postData = {
            name: payload.name,
            email: payload.email,
            msisdn: this.phonenumber,
            location: payload.location,
            profile: payload.profile,
            country: this.country,
            sex: payload.gender,
            age: payload.age
          };

          this.$f7.request.post(
            "https://citygists.com/register/regsubcitygists.php",
            postData,
            function(data) {
              //console.log("Load was performed", data);
            }
          );

          //end of mysql database
        } else {
          this.$store.dispatch("signUp", payload);
          //send to mysal database
          //console.log("http");
          var postData = {
            name: payload.name,
            email: payload.email,
            msisdn: this.phonenumber,
            location: payload.location,
            profile: payload.profile,
            country: this.country,
            sex: payload.gender,
            age: payload.age
          };

          this.$f7.request.post(
            "https://citygists.com/register/regsubcitygists.php",
            postData,
            function(data) {
              //console.log("Load was performed", data);
            }
          );

          //end of mysql database
        }
      } 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>