<template>
  <VcPopover
    v-click-outside="onClickOutside"
    :open="tooltipOpened"
    :class="inputWrapperClassesProp"
    popover-width="276"
    max-width="100%"
    :wrapper-external-styles="{ flex: '1 0 30%' }"
    trigger="manual"
  >
    <template #reference>
      <VcInput
        :model-value="formattedInputValue"
        :label="label"
        :label-icon="labelIcon"
        :placeholder="parts[part].placeholder"
        :color="color"
        dynamic-error-space
        max-width="100%"
        class="w-full"
        readonly
        @click="toggleTooltip"
      />
    </template>
    <div
      ref="popoverContent"
      class="flex justify-center pt-4 w-full"
    >
      <VcTabs
        v-model="active"
        stretch
      >
        <VcTabPane
          name="absolute-tab"
          :label="$tVU.t('date.picker.absolute')"
          class="p-2"
        >
          <VcDatetimeRangePicker
            v-model="model"
            v-bind="$attrs"
            dynamic-error-space
            enable-time-picker
            hide-border
            inline
          />
        </VcTabPane>
        <VcTabPane
          name="relative-tab"
          :label="$tVU.t('date.picker.relative')"
          class="p-2"
        >
          <div class="popover-tab-wrapper">
            <ExtendedDatetimeRangePickerRelative
              v-model="model"
              v-bind="$attrs"
            />
          </div>
        </VcTabPane>
      </VcTabs>
    </div>
  </VcPopover>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { PartsType, PARTS } from '@/components/VcExtendedDatetimeRangePicker/enum'
import inputMixin from '@/mixins/input.mixin'
import clickOutside from '@/directives/click-outside'
import VcPopover from '@/components/VcPopover/VcPopover.vue'
import VcInput from '@/components/VcInput/VcInput.vue'
import VcTabs from '@/components/VcTabs/VcTabs.vue'
import VcTabPane from '@/components/VcTabs/VcTabPane.vue'
import VcDatetimeRangePicker from '@/components/VcDatetimeRangePicker/VcDatetimeRangePicker.vue'
import ExtendedDatetimeRangePickerRelative
  from '@/components/VcExtendedDatetimeRangePicker/ExtendedDatetimeRangePickerRelative.vue'
import { format } from 'date-fns/fp'

declare type PartsInnerType = {
  [key: string]: string
}
declare type PartsOuterType = {
  [key: string]: PartsInnerType
}

export default defineComponent({
  name: 'ExtendedDatetimeRangePickerPart',
  components: { VcPopover, VcInput, VcTabs, VcTabPane, VcDatetimeRangePicker, ExtendedDatetimeRangePickerRelative },
  directives: {
    'click-outside': clickOutside
  },
  mixins: [inputMixin],
  inheritAttrs: false,
  props: {
    part: {
      type: String as PropType<PartsType>,
      required: true
    },
    modelValue: {
      type: Date as PropType<Date>,
      default: null
    },
    inputWrapperClassesProp: {
      type: [Array, String],
      default: ''
    },
    inputValueFormat: {
      type: String,
      default: 'MM/dd/yyyy, HH:mm'
    }
  },
  emits: ['update:modelValue'],
  data: () => ({
    tooltipOpened: false,
    active: 'absolute-tab'
  }),
  computed: {
    parts () {
      const parts = {} as PartsOuterType
      Object.entries(PARTS).forEach(([key, val]) => {
        parts[key] = {} as PartsInnerType
        Object.entries(val).forEach(([key2, val2]) => {
          parts[key][key2] = key2 === 'placeholder' ? this.$tVU.t(val2) : val2
        })
      })
      return parts
    },
    model: {
      get (): Date | null {
        return this.modelValue
      },
      set (val: Date): void {
        this.closeTooltip()

        this.$emit('update:modelValue', val)
      }
    },
    formattedInputValue (): string {
      return this.model === null
        ? ''
        : format(this.inputValueFormat, this.model)
    }
  },
  methods: {
    onClickOutside (e: PointerEvent): void {
      const popoverContentNode = (this.$refs.popoverContent as HTMLElement | undefined | null)
      const clickedEl = (e.target as HTMLElement)

      if (popoverContentNode !== undefined && popoverContentNode !== null && !(popoverContentNode === e.target || popoverContentNode.contains(clickedEl))) {
        this.closeTooltip()
      }
    },
    closeTooltip (): void {
      this.tooltipOpened = false
    },
    toggleTooltip (): void {
      this.tooltipOpened = !this.tooltipOpened
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@vuepic/vue-datepicker/src/VueDatePicker/style/_variables.scss';

.popover-tab-wrapper {
  min-width: $dp__menu_min_width;
  max-width: $dp__menu_min_width;
}
</style>
