<script lang="ts" setup>
import dayjs, { Dayjs } from 'dayjs'
import { ref, watch } from 'vue'

// type RangeValue = [Dayjs, Dayjs]
// const ETDDate = ref<RangeValue>()
const props = defineProps({
  CalendarWidth: {
    type: String,
    default: '368px'
  },
  CalendarTitle: {
    type: String
  },
  Date: {
    type: Array
  }
})
const ETDDate = ref(props.Date)
watch(
  () => props.Date,
  (current) => {
    ETDDate.value = current
  }
)
const emit = defineEmits(['DateRangeChange', 'DateChange'])
const open = ref(false)
const Disabled = ref([false, false])
const isShowExtra = ref(true)

const ChangeToday = (val: any) => {
  if (val == 'Earliest') {
    // ETDDate.value = [dayjs(), dayjs()]
    ETDDate.value[0] = dayjs()
    open.value = false
  } else {
    ETDDate.value[1] = dayjs()
    open.value = false
    // ETDDate.value = [dayjs(), dayjs()]
  }
}
const handleCalendarOpen = () => {
  open.value = !open.value
}
const Earliest = () => {
  Disabled.value = [true, false]
  ETDDate.value = [dayjs('Oct-05-2009'), dayjs()]
}
const Latest = () => {
  Disabled.value = [false, true]
}
const changeRangeData = (value: any) => {
  if (value != '') {
    const rangedata = {
      title: props.CalendarTitle,
      data: value
    }
    emit('DateRangeChange', rangedata)
    emit('DateChange', value)
  }
}
const handlePanelChange = (value: any, mode: any) => {
  if (mode[0] == 'year' || mode[0] == 'month') {
    isShowExtra.value = false
  } else {
    isShowExtra.value = true
  }
}
</script>
<template>
  <div>
    <div class="ETD_title">{{ props.CalendarTitle }}</div>
    <a-range-picker
      separator="To"
      :showToday="false"
      :allowClear="false"
      :style="{ width: props.CalendarWidth }"
      :open="open"
      :disabled="Disabled"
      @change="changeRangeData"
      :placeholder="['Start Time', 'End Time']"
      format="MMM-DD-YYYY"
      valueFormat="MM/DD/YYYY"
      @openChange="handleCalendarOpen"
      @panelChange="handlePanelChange"
      v-model:value="ETDDate"
    >
      <template #suffixIcon>
        <span class="iconfont_icon">
          <svg class="iconfont" aria-hidden="true">
            <use xlink:href="#icon-icon_date_b"></use>
          </svg>
        </span>
      </template>
      <template #renderExtraFooter v-if="isShowExtra">
        <div class="flex">
          <div class="footer_left">
            <el-button class="el-button--noborder" @click="Earliest">Earliest Time</el-button>
            <el-button class="el-button--noborder" @click="ChangeToday('Earliest')"
              >Today</el-button
            >
          </div>
          <div class="footer_left footer_right">
            <el-button @click="Latest" class="el-button--noborder">Latest Time</el-button>
            <el-button class="el-button--noborder" @click="ChangeToday('Latest')">Today</el-button>
          </div>
        </div>
      </template>
    </a-range-picker>
  </div>
</template>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
}
.footer_left {
  display: flex;
  flex: 50%;
  padding: 4px 0 4px 8px;
}
.footer_right {
  border-left: 1px solid var(--color-border);
}
.el-button--noborder {
  color: var(--color-theme);
}
.ETD_title {
  font-size: var(--font-size-2);
  margin-bottom: 4px;
  color: var(--color-neutral-2);
}
</style>