<template>
  <div class="xw-867px w-100">
    <form class="w-100 h-1139px" @submit.prevent="submit">
      <div class="w-100 h-958px d-fx fxd-c ai-c b-we bo-1px bo-EDEDED bor-6px">
        <h2 class="f-15px c-999999 lh-18px mt-40px" style="letter-spacing: 0.32px">Basic Information</h2>
        <!-- IMAGE -->
        <div class="w-120px h-120px mt-28px p-r o-h d-fx jc-c ai-c" v-if="dataReady">
          <img class="w-100 h-100" :src="user_data[0].image" v-if="user_data[0].image" alt="Profile Picture">
          <!-- FIXME update this to <i class="icon-name"></i> soon -->
          <i class="icon-user-circle f-110px p-a c-EAEAEA" v-else></i>
          <!-- <ic-icon v-else name="profile" width="120" height="120" fill="#EAEAEA"></ic-icon>  -->
        </div>
        <!-- {{user_data}} -->
        <span class="f-34px fw-300 lh-36px c-222222 mt-12px" v-if="dataReady">{{ user_data[0].name }}</span>
        <!-- <ic-button type="file" value="Upload Now" class="mt-14px c-3FA2F7" p="12px" @change.native.prevent="upload"></ic-button> -->
        <ic-button type="file" value="Upload Now" class="mt-14px" :class="`c-${colors.first} bo-${colors.first}`" p="12px" @click.native.prevent="$refs.upload.click()"></ic-button>
        <input type="file" ref="upload" @change="upload" class="d-n">

        <div class="w-100 mt-36px d-fx fxd-c ai-c">
          <div class="xw-515px w-100 d-fx fxd-c"
          :class="[(index > 0 ? 'mt-20px' : '')]"
          v-for="(data, key, index) in basic_Info_Form" :key="index">
            <span class="f-13px fw-500 lh-14px c-767676">{{data.title}}</span>
            <input type="text" 
            :placeholder="data.placeholder" 
            class="bo-1px bor-3px mt-12px h-36px pl-12px f-15px fw-400 c-222222" 
            :class="$v.basic_Info_Form[key].$error === true ? 'bo-rd' : 'bo-D6D6D6 '"
            :value="data.value === 'null'? '' : data.value" @input="data.value = $event.target.value"
            @blur="$v.basic_Info_Form[key].$touch()"> <!-- NOTE: $touch() is very important in vuelidate because $error will not update one the $touch() has not been fired.  -->
          </div>

        </div>
        
        <div class="xw-515px w-100 mt-42px">
          <span class="f-13px c-767676 lh-14px">About Me</span>
          <textarea name="" id="" style="resize: none" placeholder="Enter About me" 
            :value="about_Me_Field.value == 'null'? '' : about_Me_Field.value"
            @input="about_Me_Field.value = $event.target.value"
            class="w-100 h-112px mt-12px bo-1px bor-3px pt-18px pt-12px pl-12px f-15px fw-400 lh-22px c-222222"
            :class="$v.about_Me_Field.value.$error === true ? 'bo-rd' : 'bo-D6D6D6'" 
            @blur="$v.about_Me_Field.value.$touch()"></textarea>
        </div>

      </div>
      <!-- BUTTONS -->
      <div class="w-100 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="updateData" :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 { UserM } from '@/models/Userist.js'

// import { required, email, minLength } from 'vuelidate/lib/validators'
import { required, alpha, minLength } from 'vuelidate/lib/validators'

export default {
  name: 'BasicInformationC',
  extends: {},
  props: {
    colors: Object
  },
  data(){
    return{
      basic_Info_Form: {
        first_Name: {
          value: '',
          title: 'First Name',
          placeholder: 'Enter First Name'
        },
        last_Name: {
          value: '',
          title: 'Last Name',
          placeholder: 'Enter Last Name'
        },
        company: {
          value: '',
          title: 'Company',
          placeholder: 'Enter Company Name'
        },
        occupation: {
          value: '',
          title: 'Occupation',
          placeholder: 'Enter Occupation'
        },
        website_URL: {
          value: '',
          title: 'Website URL',
          placeholder: 'Enter Website URL'
        },
      },
      about_Me_Field: {
        value: ''
      },
      user_data: [],
      image: 'aw',
      dataReady: false
    };
  },
  validations: {
    basic_Info_Form: {
      first_Name: {
        value: { authentication: (value) => (/^[a-zA-Z][a-zA-Z ]+[a-zA-Z]$/.test(value)), required }
      },
      last_Name: {
        value: { alpha, required }
      },
      company: {
        value: { authentication: () => true }
      }, 
      occupation: {
        value: { authentication: () => true }
      }, 
      website_URL: {
        value: { authentication: () => true }
      },

    },
    about_Me_Field: {
      value: {
        minLength: minLength(8),
        required
      }
    }
    
  },
  components: {},
  computed: {},
  watch: {},
  methods: {
    // upload: () => alert('upload'), // used in "Upload Now" button
    
    // submit: () => alert('SUBMITTED'), // used in "SUBMIT" button
    // cancel: () => alert('cancelled'),  // used in "CANCEL" button
    cancel () { //UpdateCurrentComponent
      this.$store.state.myPageAndProfile.currentComponent = 'ic-myPage'
    },
    getUser() {
      this.$store.state.ic_loader.loader = true
      this.user_data = this.$store.state.sign.user_data
      this.setDataValue()
      this.dataReady = true
      this.$store.state.ic_loader.loader = false
    },

    // SET
    
    setDataValue() {
      // destructured way
      const [{name: full_name, company, job: occupation, website_url, introduce: about_me}] = this.user_data

      this.basic_Info_Form.first_Name.value = full_name.split(' ').slice(1).join(' ')
      this.basic_Info_Form.last_Name.value = full_name.split(' ').slice(0, -1).join(' ')
      this.basic_Info_Form.company.value = company
      this.basic_Info_Form.occupation.value = occupation
      this.basic_Info_Form.website_URL.value = website_url
      this.about_Me_Field.value = about_me
    },
    // UPDATE
    async updateData () {
      const [{id, email, password,}] = this.$store.state.sign.user_data
      UserM.update(id, {
        "email" : `${email}`,
        "password" : `${password}`,
        "name" : `${this.basic_Info_Form.last_Name.value} ${this.basic_Info_Form.first_Name.value}`,
        "company": `${this.basic_Info_Form.company.value}`,
        "job" : `${this.basic_Info_Form.occupation.value}`,
        "website_url" : `${this.basic_Info_Form.website_URL.value}`,
        "introduce" : `${this.about_Me_Field.value}`,
      })
      this.$store.state.sign.user_data[0].name = await `${this.basic_Info_Form.last_Name.value} ${this.basic_Info_Form.first_Name.value}`,
      this.$store.state.sign.user_data[0].company = await `${this.basic_Info_Form.occupation.value}`,
      this.$store.state.sign.user_data[0].job = await `${this.basic_Info_Form.occupation.value}`,
      this.$store.state.sign.user_data[0].website_url = await `${this.basic_Info_Form.website_URL.value}`,
      this.$store.state.sign.user_data[0].introduce = await `${this.about_Me_Field.value}`
      // Sweet Alert 2
      this.$swal.fire('Success!', '', 'success')
    },
    
    // Image upload functions
    upload (e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;
        this.createImage(files[0]);
        // console.log('detected');
    },
    createImage(file) {
      // var image = new Image();
      var reader = new FileReader();
      var vm = this;

      reader.onload = (e) => {
        this.$store.state.ic_loader.loader = true

        const [{id, email, password}] = this.$store.state.sign.user_data
        UserM.update(id, {
          "email" : `${email}`,
          "password" : `${password}`,
          "image": e.target.result,
        })
        vm.user_data[0].image = e.target.result;
        
        this.$store.state.ic_loader.loader = false
      };
      reader.readAsDataURL(file);
    },
    // removeImage: function (e) {
    //   this.image = '';
    // }
  },
  beforeCreate() {},
  beforeUpdate() {},
  mounted() {},
  created() {
    this.getUser()
  },
}
</script>
