<template>
  <div class="flex flex-row! items-center">
    <div class="pos-relative!">
      <avue-date
        v-model="startDateTime"
        type="datetime"
        :placeholder="`${t('Avue.date.start')}${column.label}`"
        :format="column.format"
        :valueFormat="column.valueFormat"
        :defaultValue="column.defaultValue"
        :prefixIcon="column.prefixIcon"
        :disabled-date="startPickerOptions.disabledDate"
        :size="size"
      ></avue-date>
    </div>
    <div class="px-5px">{{ t('Avue.control.to') }}</div>
    <div class="pos-relative!">
      <avue-date
        v-model="endDateTime"
        type="datetime"
        :placeholder="`${t('Avue.date.end')}${column.label}`"
        :format="column.format"
        :valueFormat="column.valueFormat"
        :defaultValue="column.defaultValue"
        :prefixIcon="column.prefixIcon"
        :disabled-date="endPickerOptions.disabledDate"
        :size="size"
      ></avue-date>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'InputDateRange' })

interface Column {
  label: string
  format?: string
  valueFormat?: string
  defaultValue?: string
  prefixIcon?:string
  placeholder?: string
}
interface Props {
  column: Column
  size?: 'small' | 'large' | 'default'
  disabled?: boolean
}
const props = defineProps<Props>()
const model = defineModel<string>()
const { t } = useI18n()

const startDateTime = ref<string | null>(null)
const endDateTime = ref<string | null>(null)


const getDateZeroTimestamp = (dateStr: string | Date) => {
  const date = new Date(dateStr)

  date.setHours(0, 0, 0, 0)
  return date.getTime()
}
const startPickerOptions = {
    disabledDate: (current: Date) => {
      if (!current) return false 
      if (!endDateTime.value) return false 
      const currentZeroTime = getDateZeroTimestamp(current)
      const endZeroTime = getDateZeroTimestamp(endDateTime.value)
      return endZeroTime < currentZeroTime
    }
  }



const endPickerOptions =  {
   disabledDate: (current: Date) => {
      if (!current) return false
      if (!startDateTime.value) return false 
      const currentZeroTime = getDateZeroTimestamp(current)
      const startZeroTime = getDateZeroTimestamp(startDateTime.value)
      return startZeroTime > currentZeroTime
    }
  }


watch([() => startDateTime.value, () => endDateTime.value], (newVal) => {
  const isStart = newVal[0] === null || newVal[0] === undefined
  const isEnd = newVal[1] === null || newVal[1] === undefined
  const str = `${isStart ? null : (newVal[0])},${isEnd ? null : (newVal[1])}`
  model.value = str == 'null,null' ? '' : str
})

watch(
  () => model.value,
  (value) => {
    if (value) {
      const dateTimeList = (value + '').split(',')
      startDateTime.value = dateTimeList[0] !== undefined ? dateTimeList[0] : null
      endDateTime.value = dateTimeList[1] !== undefined ? dateTimeList[1] : null
    } else {
      startDateTime.value = null
      endDateTime.value = null
    }
    if (props.column['onChange']) props.column['onChange']({ value, column: props.column })
    else if (props.column['change']) props.column['change']({ value, column: props.column })
    
  }
)
</script>

<style lang="scss" scoped></style>
