<template>
  <div class="w-100" :class="window.height < 947 ? 'h-100' : 'h-100vh_136px'">
    <form action="">
      <div class="w-867px bor-6px bo-1px bo-EDEDED b-we d-fx fxd-c ai-c pb-54px">
        <span class="mt-40px f-15px lh-18px c-999999" style="letter-spacing: 0.32px">CHANGE PASSWORD</span>
        <div class="xw-515px w-100" :class="index > 0 ? 'mt-20px' : 'mt-28px'" v-for="(data, key, index) in form_data" :key="index">
          <span class="c-767676 f-13px lh-14px fw-500 " style="letter-spacing: 0.32px">{{data.title}}</span>
          <input type="password" class="w-100 h-36px bo-1px bor-3px pl-12px f-15px fw-400 lh-14px c-222222 mt-12px" 
          :class="$v.form_data[key].value.$error === true ? 'bo-rd' : 'bo-D3D3D3'"
          v-model="data.value"
          @blur="$v.form_data[key].value.$touch()">
        </div>
      </div>

      <div class="d-fx jc-c mt-24px">
        <ic-button value="CANCEL" @click.native.prevent="cancel" :class="`c-${colors.first} bo-${colors.first} b-${colors.first}-h`" class="h-54px mr-5px fw-300 c-we-h" f="18px" p="54px"></ic-button>
        <ic-button value="SAVE" type="button" @click.native.prevent="updatePassword" :class="`c-${colors.first} bo-${colors.first} b-${colors.first}-h`" class="h-54px mr-5px fw-300 c-we-h" f="18px" p="54px"></ic-button>
      </div>
    </form>
  </div>
</template>

<script>
import { ChangePasswordM } from '@/models/Userist.js'
import { required, minLength } from 'vuelidate/lib/validators'
import windowListener from '@/mixins/WindowEventListener_mixins';
import axios from "axios";

export default {
  name: 'ChangePasswordC',
  extends: {},
  props: {
    colors: Object
  },
  data() {
    return{
      form_data: {
        current_password: {
          value: '',
          title: 'Current Password',
          placeholder: 'Enter Current Password'
        },
        new_password: {
          value: '',
          title: 'New Password',
          placeholder: 'Enter New Password'
        }
      },
      user_data: [],
      dataReady: false
    };
  },
  validations: {
    form_data: {
      current_password: {
        value: {
          //Check if password inputed is correct or not
          // checkPassword: sameAs( function () { return this.user_data[0].password } ),
          required
        }
      },
      new_password: { //must have Capital letter, small letter, and a number and minimum of 9 characters
        value: {
          authentication (value) {
            return (/^(?=.*?[0-9])(?=.*?[A-Z])(?=.*?[a-z]).{8,}$/.test(value));
          },
          minLength: minLength(8),
          required
        }
      }
    }
  },
  methods: {
    async updatePassword () {
        // this.$swal.fire('Failed!', 'Check your password', 'error')        

      try {
        this.$store.state.ic_loader.loader = true
        let token = await this.$cookies.get("token")
        if (token) {
          axios.defaults.headers.common['Authorization'] = await `token ${token}`
        }
        let result = await ChangePasswordM.create({
          "currentPassword": `${this.form_data.current_password.value}`,
          "newPassword": `${this.form_data.new_password.value}`,
        })
        // console.log(result);
        
        if (result.status === 200) {
          this.$store.state.ic_loader.loader = await false
          await this.$swal.fire('Success!', 'Password changed', 'success')
        } else {
          this.$store.state.ic_loader.loader = await false
          await this.$swal.fire('Failed!', 'Check your password', 'error')
        }
      } catch (error) {
        this.$swal.fire('Failed!', 'Check your password', 'error')   
        this.$store.state.ic_loader.loader = false
      }
    },
    cancel () { //UpdateCurrentComponent
      this.$store.state.myPageAndProfile.currentComponent = 'ic-myPage'
    },
  },
  components: {},
  computed: {},
  watch: {},
  beforeCreate(){},
  mounted(){},
  created() {
    // this.getUser()
  },
  mixins: [windowListener],
}
</script>
