<template>
  <div>
    <div class="field is-grouped mb-4 border-bottom">
      <div class="control pl-2">
      <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 mr-3" @click="type='months'" v-if="type==='days'">{{`T${month}`}}</span>
        <span class="fsb-16" @click="type='years'">{{ caption || year }}</span>
      </div>
      <div class="control pr-2">
        <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" v-for="(m,h) in v.dates" :key="h">
        <a class="fs-14" @click="choose(m)">
          <span class="has-background-primary has-text-white px-1 py-1" v-if="m.date===curdate">{{ m.dayPrint }}</span>
          <span class="has-background-findata has-text-white px-1 py-1" v-else-if="m.date===today">{{ m.dayPrint }}</span>
          <span class="has-text-grey" v-else-if="m.currentMonth!==m.mothCondition">{{ m.dayPrint }}</span>
          <span v-else>{{m.dayPrint}}</span>    
        </a>
      </div>
    </div>
    <div class="border-bottom"></div>
    <div class="mt-2">
      <span class="ml-2 mr-2">Hôm nay: </span>
      <span class="has-text-primary" @click="chooseToday()">{{ $dayjs(today).format('DD/MM/YYYY') }}</span>
    </div>
  </div>
  <div v-else-if="type==='months'">
    <PickMonth @month="selectMonth"></PickMonth>
  </div>
  <div v-else-if="type==='years'">
    <PickYear v-bind="{year: year, month: month, action: action}" @year="selectYear" @caption="changeCaption"></PickYear>
  </div>
  </div>
</template>
<script setup>
import PickMonth from '@/components/datepicker/PickMonth'
import PickYear from '@/components/datepicker/PickYear'
const { $id, $dayjs, $unique} = useNuxtApp()
const emit = defineEmits(['date'])
var props = defineProps({
  date: String
})
    var   dates = [] 
    var  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"}]
    var  weeks = ref([])
    var  year=  undefined
    var  month = undefined
    var  type = 'days'
    var  caption = undefined
    var  action = undefined
    var  curdate = undefined
    var today = new Date()

  function showDate() {
      curdate = props.date? props.date.replaceAll('-', '/') : undefined
      year = $dayjs(curdate || today).year()
      month = $dayjs(curdate || today).month() + 1
      getDates()
    }
  function chooseToday() {
      emit('date', today.replaceAll('/', '-'))
      year = $dayjs(today).year()
      month = $dayjs(today).month() + 1
      getDates()
    }
  function changeCaption(v) {
      caption = v
    }
  function  selectMonth(v) {
      month = v
      getDates()
      type = 'days'
    }
  function selectYear(v) {
      year = v
      getDates()
      type = 'days'
    }
  function getDates() {
      caption = undefined
      dates = allDaysInMonth(year, month)
      weeks.value = $unique(dates, ['week']).map(v=>{return {week: v.week}})
      weeks.value.map(v=>{
        v.dates = dates.filter(x=>x.week===v.week)
      })
    }
    function nextMonth() {
      month = month + 1
      if(month>12) {
        month = 1
        year += 1
      }
      getDates()
    }
    function previousMonth() {
      month = month - 1
      if(month===0) {
        month = 12
        year -= 1
      }
      getDates()
    }
    function nextYear() {
      if(type==='years') return action = {name: 'next', id: $id()}
      year += 1
      getDates()
    }
    function previousYear() {
      if(type==='years') return action = {name: 'previous', id: $id()}
      year -= 1
      getDates()
    }
    function choose(m) {
      emit('date', m.date.replaceAll('/', '-'))
    }
    function createDate(v, x, y) {
      return v + '/' + (x<10? '0' + x.toString() : x.toString()) + '/' + (y<10? '0' + y.toString() : y.toString())
    }
    function allDaysInMonth(year, month) {
      
      let days = Array.from({length: $dayjs(createDate(year, month, 1)).daysInMonth()}, (_, i) => i + 1)
      let arr = []
      days.map(v=>{
        for (let i = 0; i < 7; i++) { 
          let thedate = $dayjs(createDate(year, month, v)).weekday(i)
          let date = $dayjs(new Date(thedate.$d)).format("YYYY/MM/DD")
          let dayPrint = $dayjs(new Date(thedate.$d)).format("DD")
          let mothCondition = $dayjs(date).month() +1
          let currentMonth = month
          let found = arr.find(x=>x.date===date)
          if(!found) {
            let dayOfWeek = $dayjs(date).day() 
            let week = $dayjs(date).week() 
            let ele = {date: date, week: week, day: v, dayOfWeek: dayOfWeek, dayPrint: dayPrint, mothCondition: mothCondition, currentMonth: currentMonth}
            arr.push(ele)
          }
        }
      })
      return arr
    }
    // display
    showDate()
    // change date
    watch(() => props.date, (newVal, oldVal) => {
      showDate()
    })
    
</script>