<template>
  <div class="w-100 b-we pb-60px">
    <div class="xw-860px w-100 pr-47px pl-47px cen-x p-r">
      <div class="w-100 h-100 p-r">
        <div class="d-fx ai-c pt-83px">
          <!-- {{colors.first}} -->
          <span class="f-34px fw-300 lh-36p mr-12px" v-if="id && dataReady">{{user_data[0].name}}</span>
          <ic-button v-if="this.compare_params_id_to_user_id" value="Edit Profile" :class="`c-${colors.first}`" p="13px" @click.native="updateComponent"></ic-button>
          <ic-button v-else value="Follow" class="c-3FA2F7" p="13px"></ic-button>
        </div>
        <div class="f-24px fw-300 lh-26px c-767676 mt-12px" v-if="id && dataReady">{{user_data[0].job}}</div>
        <div class="mt-23px d-fx ai-c">
          <i class="icon-mail-open f-12px mr-5px o-50"></i>
          <a class="f-13px fw-300 lh-20px c-767676" style="text-decoration: underline;" :href="website_url" target="blank">{{website_url}}</a>
        </div>
        <!-- {{user_data[0].image === null}}         -->
        
        <div v-if="dataReady">
          <data-description-c v-for="(data, key, index) in descData" :key="index" :description="data" :title="key" :class="index > 0 ? 'mt-28px' :'mt-36px'"></data-description-c>
        </div>
        <!-- Data counts -->
        <div class="d-fx mt-36px">
          <data-count-c v-for="(data, key, index) in mypage_data" :key="index" :title="key" :count="data"></data-count-c>
        </div>
        <!-- Profile picture -->
        <!-- {{typeof user_data[0].image}} -->
        <div class="w-120px h-120px bo-rd bor-100 p-a t-60px r-25px o-h">
          <img class="w-100 h-100" :src="user_data[0].image" alt="Profile Picture" v-if="id && dataReady && user_data[0].image">
          <!-- FIXME update this to <i class="icon-name"></i> soon -->
          <ic-icon v-else name="profile" width="120" height="120" fill="#EAEAEA"></ic-icon> 
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapStateVModel} from 'map-state-vmodel';
import { UserM } from '@/models/Userist.js'

import dataDescriptionC from './myPage/DataDescriptionC.vue'
import dataCountC from './myPage/DataCountC.vue'

export default {
  name: 'ic-myPage',
  extends: {},
  props: {
    mypage_data: {
      type: Object,
      required: true
    },
    website_url: String,
    descData: Object,
    colors: Object
  },
  data(){
    return{
      
      // sample count
      // dataCount: [
      //   { title: 'subscriber', count: 10},
      //   { title: 'follow', count: 21},
      //   { title: 'leancanvas', count: 5},
      // ],
      user_data: [],
      dataReady: false,
      compare_params_id_to_user_id: this.$route.params.id == this.$store.state.auth.id
    };
  },
  components: {
    'data-description-c': dataDescriptionC,
    'data-count-c': dataCountC
  },
  computed: {
    ...mapStateVModel('auth', ['id']),
    checkSignUserData() {
      if(this.$store.state.sign.user_data[0] !== undefined) {
        return this.setUserData(this.$store.state.sign.user_data)
      }
      return true
    }
  },
  watch: {
    checkSignUserData() {}
  },
  methods: {
    updateComponent() {
      this.$store.state.myPageAndProfile.currentComponent = 'ic-myProfile'
    },
    // set
    async setUserData (data) {
      if (this.compare_params_id_to_user_id) {
        this.user_data = await data
        this.dataReady = await true
      } else {
        // Visiting other user's data
        this.$store.state.ic_loader.loader = await true
        const { data } = await UserM.getId(this.$route.params.id)
        this.user_data = await data.results
        this.dataReady = await true  
        this.$store.state.ic_loader.loader = await false
      }
    },
  },
  beforeCreate() {},
  beforeUpdate (){

  },
  mounted() {},
  created() {
    // For reactivity purposes
    // this.$watch('checkSignUserData', () => {
    //   this.checkSignUserData
    // })
  }
}
</script>
