<template>
  <v-container>
    <v-row>
      <v-col cols="12" sm="12" class="fontcolor-black-light">
        <v-alert
          class="alert-box-outline"
          type="error"
          text
          dense
          v-if="wrongPasswordMessage"
        >{{wrongPasswordMessage}}</v-alert>
        <p class="mb-1 h2 body-font text-uppercase primary--text">Edit Account Information</p>
        <v-form ref="form" v-model="valid">
          <v-row>
            <v-col cols="12" sm="6" md="6" lg="6">
              <div>
                <p class="mt-4 h3 body-font text-uppercase primary--text">Account Information</p>
                <div class="edit-account-info-line mt-5 mb-7"></div>

                <v-text-field
                  label="First Name"
                  ref="firstname"
                  v-model="firstname"
                  :rules="textRules"
                  outlined
                  required
                  dense
                ></v-text-field>
                <v-text-field
                  label="Last Name"
                  ref="lastname"
                  v-model="lastname"
                  :rules="textRules"
                  outlined
                  dense
                  required
                ></v-text-field>
                <!--<v-checkbox v-model="email" label="Change Email" color="indigo" value="indigo"></v-checkbox>-->
              </div>
            </v-col>
            <v-col cols="12" sm="6" md="6" lg="6">
              <div>
                <!--<v-col class="mx-0 px-0" v-if="email && !password">
              <v-row class="ml-1 mt-1">
                <p class="h3 body-font mr-3">Change Email</p>
              </v-row>
              <div class="edit-account-info-line mt-1 mb-7"></div>
              <v-text-field
                label="Email"
                ref="emailId"
                v-model="emailId"
                :rules="textRules"
                outlined
                required
                dense
              ></v-text-field>
              <v-text-field
                label="Current Password"
                ref="currentPassword"
                v-model="currentPassword"
                :rules="textRules"
                outlined
                dense
                required
              ></v-text-field>
                </v-col>-->
                <v-col class="mx-0 px-0" v-if="password">
                  <v-row class="ml-1 mt-1">
                    <p class="h3 body-font">Change Password</p>
                  </v-row>
                  <div class="edit-account-info-line mt-1 mb-7"></div>
                  <v-text-field
                    type="password"
                    label="Current Password"
                    ref="currentPassword"
                    v-model="currentPassword"
                    :rules="passwordRules"
                    outlined
                    dense
                  ></v-text-field>
                  <v-text-field
                    type="password"
                    label="New Password"
                    ref="newPassword"
                    :rules="commonValidationRules.passwordRule"
                    v-model="newPassword"
                    outlined
                    dense
                  ></v-text-field>
                  <v-text-field
                    type="password"
                    label="Confirm New Password"
                    ref="confirmPassword"
                    v-model="confirmPassword"
                    :rules="[passwordConfirmationRule]"
                    outlined
                    dense
                  ></v-text-field>
                </v-col>
                <!--<v-col class="mx-0 px-0" v-if="email && password">
              <v-row class="ml-1 mt-1">
                <p class="h3 body-font mr-3">Change Email &</p>
                <p class="h3 body-font">Change Password</p>
              </v-row>
              <div class="edit-account-info-line mt-1 mb-7"></div>
              <v-text-field
                label="Email"
                ref="emailId"
                v-model="emailId"
                :rules="textRules"
                outlined
                required
                dense
              ></v-text-field>
              <v-text-field
                label="Current Password"
                ref="currentPassword"
                v-model="currentPassword"
                :rules="textRules"
                outlined
                dense
                required
              ></v-text-field>
              <v-text-field
                label="New Password"
                ref="newPassword"
                v-model="newPassword"
                :rules="textRules"
                outlined
                dense
                required
              ></v-text-field>
              <v-text-field
                label="Confirm New Password"
                ref="confirmPassword"
                v-model="confirmPassword"
                :rules="textRules"
                outlined
                dense
                required
              ></v-text-field>
                </v-col>-->
              </div>
            </v-col>
          </v-row>
          <v-checkbox v-model="password" class="mt-0" label="Change Password" color="indigo"></v-checkbox>
          <v-hover v-slot:default="{ hover }">
            <v-btn
              :disabled="inProgress"
              large
              :outlined="hover"
              :color="hover?'white':'primary'"
              :class="hover?'primary--text':'white--text'"
              @click="submit"
              depressed
              class="mt-6 px-12 body-font edit-account-info-button"
              tile
              dark
            >
              <v-progress-circular :size="20" color="primary" indeterminate v-if="inProgress"></v-progress-circular>SAVE
            </v-btn>
          </v-hover>
        </v-form>
      </v-col>
    </v-row>
    <SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
  </v-container>
</template>
<script>
//import { mapState } from "vuex";

import { loginInterrupt } from "@/services/nav";
import { createHelpers } from "vuex-map-fields";
import { commonValidationRules } from "@/services/util.service";
import SnackbarComponent from "@/components/common/SnackbarComponent";
const { mapFields } = createHelpers({
  getterType: "accountOne/getField",
  mutationType: "accountOne/updateField"
});
export default {
  name: "EditAccountInfo",
  data: () => ({
    //email: false,
    wrongPasswordMessage: "",
    snackbar: {
      show: false,
      message: null,
      color: null,
      timeout: 0
    },
    password: false,
    commonValidationRules: commonValidationRules,
    newPassword: "",
    currentPassword: "",
    confirmPassword: "",
    valid: true,
    textRules: [
      v => !!v || "This field is required",
      v => (v && v.length >= 3) || "This field must be at least 3 characters"
    ],
    passwordRules: [
      v => !!v || "This field is required",
      v => (v && v.length >= 8) || "This field must be at least 8 characters"
    ]
  }),
  components: { SnackbarComponent },
  computed: {
    passwordConfirmationRule() {
      return () =>
        this.newPassword === this.confirmPassword || "Password must match";
    },
    ...mapFields([
      "changedPasswordFlag",
      "one",
      "one.firstname",
      "one.lastname",
      "inProgress"
    ]),
    userAuth: function() {
      return this.$store.state.auth.userAuth;
    }
    /*wrongPasswordMessage: function() {
      return this.$store.state.accountOne.wrongPasswordMessage;
    },*/
  },
  methods: {
    submit() {
      if (this.$refs.form.validate() && !this.password) {
        this.$store
          .dispatch("accountOne/changeBasicInfo")
          .then(() => {
            this.snackbar = {
              message: "Updated Basic Information Successfully",
              color: "success",
              show: true,
              timeout: 3000
            };
            setTimeout(() => {
              this.$router.push({
                name: "AccountDashboard"
              });
            }, 3000);
          })
          .catch(error => {
            this.snackbar = {
              message: error,
              color: "error",
              show: true,
              timeout: 3000
            };
            setTimeout(() => {
              this.$router.push({
                name: "AccountDashboard"
              });
            }, 3000);
          });
      } else if (this.$refs.form.validate() && this.password) {
        localStorage.setItem("cr_changePassowrd", true);
        this.$store
          .dispatch("accountOne/changeBasicInfo", {
            current: this.currentPassword,
            new: this.newPassword
          })
          .then(data => {
            if (data.error == true) {
              this.wrongPasswordMessage =
                "The password doesn't match this account. Verify the password and try again.";
              this.password = false;
            } else {
              this.snackbar = {
                message: "Updated Basic Information Successfully",
                color: "success",
                show: true,
                timeout: 3000
              };
              setTimeout(() => {
                this.$router.push({
                  name: "AccountDashboard"
                });
              }, 3000);
            }
          })
          .catch(error => {
            this.snackbar = {
              message: error,
              color: "error",
              show: true,
              timeout: 3000
            };
            /* setTimeout(() => {
               this.$router.push({
                name: "AccountDashboard"
              });
            }, 3000);*/
          });
      }
    },
    basicInfo() {
      // return this.$store.state.accountOne.one;
    }
  },
  created() {
    if (!this.userAuth) {
      loginInterrupt(
        window.location.href,
        "There was an access violation caused by your request. You need to sign back in please."
      );
    }
    this.$store.dispatch("accountOne/basicInfo");
    if (this.$route.params.value === "true") {
      return (this.password = "true");
    }
  }
};
</script>

<style src="./edit_account_info.scss" lang="scss" scoped />