<template>
  <div>
    <div class="field is-grouped mb-4 border-bottom">
      <div class="control pl-2" v-if="mode!=='simple'">
      <a class="mr-1" @click="previousYear()">
        <SvgIcon v-bind="{name: 'doubleleft.svg', type: 'gray', size: 18}"></SvgIcon>
      </a>
      <a @click="previousMonth()" v-if="type==='days'">
      <SvgIcon v-bind="{name: 'left1.svg', type: 'gray', size: 18}"></SvgIcon>
      </a>
      </div>
      <div class="control is-expanded has-text-centered">
        <span class="fsb-16 hyperlink mr-3" @click="mode==='simple'? false : type='PickMonth'" v-if="type==='days'">{{`Tháng ${month}`}}</span>
        <span class="fsb-16 hyperlink" @click="mode==='simple'? false : type='PickYear'">{{ caption || year }}</span>
      </div>
      <div class="control pr-2"  v-if="mode!=='simple'">
        <a class="mr-1" @click="nextMonth()" v-if="type==='days'">
        <SvgIcon v-bind="{name: 'right.svg', type: 'gray', size: 18}"></SvgIcon>
      </a>
      <a @click="nextYear()">
        <SvgIcon v-bind="{name: 'doubleright.svg', type: 'gray', size: 18}"></SvgIcon>
      </a>
      </div>
    </div>
    <div v-if="type==='days'">
    <div class="columns is-mobile mx-0">
      <div class="column px-2 py-1 has-text-grey-dark" v-for="(m,h) in dateOfWeek" :key="h">
        {{ m.text }}
      </div>
    </div>
    <div :class="`columns is-mobile mx-0 ${i===weeks.length-1? 'mb-1' : ''}`" v-for="(v,i) in weeks" :key="i">
      <div class="column px-3 py-1 fs-14" v-for="(m,h) in v.dates" :key="h">
        <a v-if="m.event && m.currentMonth===m.mothCondition">
          <Tooltip v-bind="{html: m.event.html, tooltip: m.event.tooltip}"></Tooltip>
        </a>
        <span class="has-background-findata has-text-white px-1 py-1" v-else-if="m.date===today">{{ m.dayPrint }}</span>
        <span v-else>{{m.dayPrint}}</span>
      </div>
    </div>
    <template v-if="mode!=='simple'">
    <div class="border-bottom"></div>
    <div class="mt-2">
      <span class="ml-2 mr-2">Hôm nay: </span>
      <span class="has-text-primary hyperlink" @click="chooseToday()">{{ $dayjs(today).format('DD/MM/YYYY') }}</span>
    </div>
    </template>
  </div>
  <div v-else-if="type==='PickMonth'">
    <PickMonth @month="selectMonth"></PickMonth>
  </div>
  <div v-else-if="type==='PickYear'">
    <PickYear v-bind="{year: year, month: month, action: action}" @year="selectYear" @caption="changeCaption"></PickYear>
  </div>
  <Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
</div>
</template>
<script>
export default {
  components: {
    PickMonth: () => import('@/components/datepicker/PickMonth'),
    PickYear: () => import('@/components/datepicker/PickYear')
  },
  props: ['date', 'events', 'mode', 'vyear', 'vmonth'],
  data() {
    return {
      dates: [],
      dateOfWeek: [{id: 0, text: "CN"}, {id: 1, text: "T2"}, {id: 2, text: "T3"}, {id: 3, text: "T4"},
      {id: 4, text: "T5",}, {id: 5, text: "T6"}, {id: 6, text: "T7"}],
      weeks: [],
      today: this.$dayjs().format('YYYY/MM/DD'),
      year: undefined,
      month: undefined,
      type: 'days',
      caption: undefined,
      action: undefined,
      curdate: undefined,
      showmodal: undefined
    }
  },
  created() {
    this.showDate()
  },
  watch: {
    date: function(newVal) {
      if(newVal) this.showDate()
    },
    events: function(newVal) {
      this.showDate()
    }
  },
  methods: {
    showDate() {
      this.curdate = this.date? this.date.replaceAll('-', '/') : undefined
      this.year = this.$dayjs(this.curdate || this.today).year()
      this.month = this.$dayjs(this.curdate || this.today).month() + 1
      if(this.vyear) this.year = this.$copy(this.vyear)
      if(this.vmonth) this.month = this.$copy(this.vmonth)
      this.getDates()
    },
    chooseToday() {
      this.$emit('date', this.today.replaceAll('/', '-'))
      this.year = this.$dayjs(this.today).year()
      this.month = this.$dayjs(this.today).month() + 1
      this.getDates()
    },
    changeCaption(v) {
      this.caption = v
    },
    selectMonth(v) {
      this.month = v
      this.getDates()
      this.type = 'days'
    },
    selectYear(v) {
      this.year = v
      this.getDates()
      this.type = 'days'
    },
    getDates() {
      this.caption = undefined
      this.dates = this.allDaysInMonth(this.year, this.month)
      this.dates.map(v=>{
        let event = this.events? this.$find(this.events, {isodate: v.date}) : undefined
        if(event) v.event = event
      })
      this.weeks = this.$unique(this.dates, ['week']).map(v=>{return {week: v.week}})
      this.weeks.map(v=>{
        v.dates = this.dates.filter(x=>x.week===v.week)
      })
    },
    nextMonth() {
      let month = this.month + 1
      if(month>12) {
        month = 1
        this.year += 1
      }
      this.month = month
      this.getDates()
    },
    previousMonth() {
      let month = this.month - 1
      if(month===0) {
        month = 12
        this.year -= 1
      }
      this.month = month
      this.getDates()
    },
    nextYear() {
      if(this.type==='PickYear') return this.action = {name: 'next', id: this.$id()}
      this.year += 1
      this.getDates()
    },
    previousYear() {
      if(this.type==='PickYear') return this.action = {name: 'previous', id: this.$id()}
      this.year -= 1
      this.getDates()
    },
    choose(m) {
      this.$emit('date', m.date.replaceAll('/', '-'))
    },
    createDate(v, x, y) {
      return v + '/' + (x<10? '0' + x.toString() : x.toString()) + '/' + (y<10? '0' + y.toString() : y.toString())
    },
    allDaysInMonth(year, month) {
      var weekday = require('dayjs/plugin/weekday')
      this.$dayjs.extend(weekday)
      var weekOfYear = require('dayjs/plugin/weekOfYear')
      this.$dayjs.extend(weekOfYear)
      let days = Array.from({length: this.$dayjs(this.createDate(year, month, 1)).daysInMonth()}, (_, i) => i + 1)
      let arr = []
      days.map(v=>{
        for (let i = 0; i < 7; i++) { 
          let thedate = this.$dayjs(this.createDate(year, month, v)).weekday(i)
          let date = this.$dayjs(new Date(thedate.$d)).format("YYYY/MM/DD")
          let dayPrint = this.$dayjs(new Date(thedate.$d)).format("DD")
          let mothCondition = this.$dayjs(date).month() +1
          let currentMonth = month
          let found = arr.find(x=>x.date===date)
          if(!found) {
            let dayOfWeek = this.$dayjs(date).day() 
            let week = this.$dayjs(date).week() 
            let ele = {date: date, week: week, day: v, dayOfWeek: dayOfWeek, dayPrint: dayPrint, mothCondition: mothCondition, currentMonth: currentMonth}
            arr.push(ele)
          }
        }
      })
      return arr
    }
  }
}
</script>