<template>
  <VcPopover
    v-click-outside="onClickOutside"
    :open="tooltipOpened"
    arrow-position="top-right"
    popover-width="auto"
    max-width="100%"
    trigger="manual"
  >
    <template #reference>
      <div class="flex">
        <VcButtonIcon
          class="flex-shrink-0"
          icon="vc-icon-date-range"
          type="plain"
          @click="tooltipOpened = true"
        />
      </div>
    </template>
    <div
      ref="popoverContent"
      class="vc-extended-datetime-range-picker-quick-list"
      :class="presetListClasses"
    >
      <p
        v-for="(range, index) in presetRanges"
        :key="index"
        @click="onRangeSelection(range)"
      >
        {{ range.label }}
      </p>
    </div>
  </VcPopover>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { VcExtendedDatetimeRangePickerModelType, VcExtendedDatetimePickerRangeType } from './VcExtendedDatetimeRangePicker.types'
import VcPopover from '@/components/VcPopover/VcPopover.vue'
import VcButtonIcon from '@/components/VcButton/VcButtonIcon.vue'
import clickOutside from '@/directives/click-outside'

export default defineComponent({
  name: 'VcExtendedDatetimeRangePickerQuickOptionsSelection',
  components: { VcButtonIcon, VcPopover },
  directives: {
    'click-outside': clickOutside
  },
  props: {
    modelValue: {
      type: Object as PropType<VcExtendedDatetimeRangePickerModelType>,
      default: () => ({ from: null, to: null })
    },
    presetRanges: {
      type: Array as PropType<VcExtendedDatetimePickerRangeType[]>,
      default: () => []
    }
  },
  emits: ['update:modelValue'],
  data () {
    return {
      tooltipOpened: false
    }
  },
  computed: {
    presetListClasses () {
      let classes = ''

      if (this.presetRanges.length > 4) {
        classes = 'columns-2'
      }

      if (this.presetRanges.length > 9) {
        classes = 'columns-3'
      }

      return classes
    }
  },
  methods: {
    onRangeSelection (range: VcExtendedDatetimePickerRangeType): void {
      this.$emit('update:modelValue', range.range)
      this.closeTooltip()
    },
    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>
.vc-extended-datetime-range-picker-quick-list {
  @apply p-2 cursor-pointer text-primary;

  &.columns-2 {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
  }

  &.columns-3 {
    -webkit-columns: 3;
    -moz-columns: 3;
    columns: 3;
  }

  p {
    @apply hover:underline p-1;
  }
}
</style>
