<template>
  <div
    class="vc-extended-datetime-range-picker"
    :data-test="`extendedDatetimeRangePicker-${dataTestName}`"
  >
    <div
      v-if="!inline"
      class="vc-extended-datetime-range-picker__label mb-2"
    >
      <label class="vc-extended-datetime-range-picker__label-wrapper flex items-center justify-between">
        <span
          v-if="labelIcon"
          class="vc-extended-datetime-range-picker__label-wrapper--left-item flex-shrink-0"
        >
          <i
            :class="labelIcon"
            class="icon-lg vc-extended-datetime-range-picker__label-wrapper--left-item-icon text-icons"
          />
        </span>
        <span
          v-if="label"
          class="vc-extended-datetime-range-picker__label-wrapper-label flex-grow"
        >
          {{ label }}
          <span
            v-if="required"
            class="vc-extended-datetime-range-picker__label-wrapper-label__required-icon"
          >*</span>
        </span>
        <VcExtendedDatetimeRangePickerQuickOptionsSelection
          v-if="presetRanges.length"
          v-model="model"
          :preset-ranges="presetRanges"
        />
      </label>
    </div>
    <div class="flex w-full flex-wrap sm:flex-nowrap flex-col sm:flex-row gap-4 sm:gap-0 items-start sm:items-center">
      <VcExtendedDatetimeRangePickerQuickOptionsSelection
        v-if="inline && presetRanges.length"
        v-model="model"
        class="mr-1"
        :preset-ranges="presetRanges"
      />
      <ExtendedDatetimeRangePickerPart
        v-model="fromDate"
        :max-date="toDate"
        :max-time="toTime"
        v-bind="$attrs"
        :color="color"
        part="FROM"
      />
      <i
        class="vc-icon-next text-primary-actions self-center hidden sm:block"
      />
      <ExtendedDatetimeRangePickerPart
        v-model="toDate"
        :min-date="fromDate"
        :min-time="fromTime"
        v-bind="$attrs"
        :color="color"
        part="TO"
      />
    </div>
    <div
      v-if="!dynamicErrorSpace || (dynamicErrorSpace && error)"
      class="vc-extended-datetime-range-picker__error-wrapper"
    >
      <span class="vc-extended-datetime-range-picker__error-wrapper--text">
        {{ error }}
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import cloneDeep from 'lodash/cloneDeep'
import { getHours, getMinutes, getSeconds } from 'date-fns/fp'
import inputMixin from '@/mixins/input.mixin'
import {
  VcExtendedDatetimePickerRangeType,
  VcExtendedDatetimeRangePickerModelType
} from './VcExtendedDatetimeRangePicker.types'
import {
  VcDatetimeRangePickerTimeType
} from '@/components/VcDatetimeRangePicker/VcDatetimeRangePicker.types'
import ExtendedDatetimeRangePickerPart
  from '@/components/VcExtendedDatetimeRangePicker/ExtendedDatetimeRangePickerPart.vue'
import VcExtendedDatetimeRangePickerQuickOptionsSelection
  from '@/components/VcExtendedDatetimeRangePicker/VcExtendedDatetimeRangePickerQuickOptionsSelection.vue'

export default defineComponent({
  name: 'VcExtendedDatetimeRangePicker',
  components: { ExtendedDatetimeRangePickerPart, VcExtendedDatetimeRangePickerQuickOptionsSelection },
  mixins: [inputMixin],
  inheritAttrs: false,
  props: {
    modelValue: {
      type: Object as PropType<VcExtendedDatetimeRangePickerModelType>,
      default: () => ({ from: null, to: null })
    },
    presetRanges: {
      type: Array as PropType<VcExtendedDatetimePickerRangeType[]>,
      default: () => []
    },
    inline: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue'],
  computed: {
    model: {
      get (): VcExtendedDatetimeRangePickerModelType {
        return this.modelValue || { from: null, to: null }
      },
      set (val: VcExtendedDatetimeRangePickerModelType): void {
        this.$emit('update:modelValue', val)
      }
    },
    fromDate: {
      get (): Date | null {
        return this.modelValue.from
      },
      set (val: Date): void {
        this.$emit('update:modelValue', {
          ...this.getModelValueCopy(),
          from: val
        })
      }
    },
    fromTime (): VcDatetimeRangePickerTimeType | null {
      if (this.fromDate === null) return null

      return this.toTimeObject(this.fromDate)
    },
    toDate: {
      get (): Date | null {
        return this.modelValue.to
      },
      set (val: Date): void {
        this.$emit('update:modelValue', {
          ...this.getModelValueCopy(),
          to: val
        })
      }
    },
    toTime (): VcDatetimeRangePickerTimeType | null {
      if (this.toDate === null) return null

      return this.toTimeObject(this.toDate)
    }
  },
  methods: {
    toTimeObject (date: Date): VcDatetimeRangePickerTimeType {
      return {
        hours: getHours(date),
        minutes: getMinutes(date),
        seconds: getSeconds(date)
      }
    },
    getModelValueCopy (): VcExtendedDatetimeRangePickerModelType {
      return cloneDeep(this.modelValue)
    }
  }
})
</script>

<style lang="scss" scoped>
@import '../../assets/sass/main/mixins';

.vc-extended-datetime-range-picker {
  @include label;
  @include errorContainer;
}
</style>
