<template>
  <div>
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <label v-if="label" class="block text-sm font-medium text-gray-900">
          {{ label }}
        </label>
        <!-- asterisk sign to render if field is required -->
        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
      </div>
      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
    </div>
    <div class="relative">
      <v-date-picker
        ref="datepicker"
        :class="[
          'h-full',
          isExpanded ? 'w-full' : '',
          isInline ? 'inline' : 'inline-block',
        ]"
        :masks="masks"
        @input="onDayClick"
        :id="id"
        :value="value"
        :popover="popoverPlacement"
        :min-date="minDate"
        :max-date="maxDate"
        :attributes="attrs"
        :first-day-of-week="firstDayOfWeek"
        :is-required="isDatePickerRequired"
        :timezone="timezone"
      >
        <template v-slot="{ inputValue, togglePopover }">
          <div v-if="showOnlyDatePickerIcon">
            <button
              type="button"
              class="relative flex h-9 w-9 cursor-pointer items-center justify-center rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:custom-disabled-state"
              :id="id + '_button_toggle_dropdown'"
              :disabled="disabled"
              @click="togglePopover()"
            >
              <c-icon
                :name="calendarIcon.iconName"
                class="text-gray-400 flex h-5 w-5 justify-center"
                :type="calendarIcon.type ? calendarIcon.type : 'solid'"
                :viewBox="calendarIcon.viewBox ? calendarIcon.viewBox : ''"
              ></c-icon>
            </button>
          </div>
          <div :class="`${isCustom ? '' : 'mt-1'} h-9 flex items-center`" v-else>
            <button
              type="button"
              :class="['border-gray-300 text-blue-600 focus:outline-none bg-white shadow-sm focus:text-white disabled:custom-disabled-state',
                isCustom ? 'border-t border-b px-3 py-2' : 'rounded-l-md border p-2'
              ]"
              :id="id + '_button_toggle_dropdown'"
              :disabled="disabled"
              @click="togglePopover()"
            >
              <c-icon
                :name="calendarIcon.iconName"
                class="text-gray-400 h-5 w-5"
                :type="calendarIcon.type ? calendarIcon.type : 'solid'"
                :viewBox="calendarIcon.viewBox"
              ></c-icon>
            </button>
            <input
              type="text"
              :value="inputValue"
              class="border-l-0 border-gray-300 text-gray-900 w-full appearance-none rounded-r-md border bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none"
              :readonly="disabled"
              :disabled="disabled"
              @input="handleInputBoxInput"
              @click="togglePopover()"
            />
          </div>
        </template>
      </v-date-picker>
    </div>
    <!-- validation error message -->
    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
      {{ errorMessage }}
    </p>
    <p v-if="helpText && isValidate == true" class="mt-2 text-sm text-gray-500">
      {{ helpText }}
    </p>
  </div>
</template>
<script>
import CIcon from "../CIcon/CIcon.vue";
// import Calendar from "v-calendar/lib/components/calendar.umd";
import VDatePicker from "v-calendar/lib/components/date-picker.umd";
export default {
  name: "CDatepicker",
  components: {
    // Calendar,
    VDatePicker,
    CIcon,
  },
  props: {
    classes: {
      type: String,
    },
    id: {
      type: String,
    },
    isRequired: {
      type: Boolean,
    },
    isCustom: {
      type: Boolean,
    },
    label: {
      type: String,
    },
    helpText: {
      type: String,
    },
    value: {
      type: [String, Date, Array],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    minDate: {
      type: [String, Date],
      default: null,
    },
    maxDate: {
      type: [String, Date],
      default: null,
    },
    isExpanded: {
      type: Boolean,
      default: false,
    },
    isValidate: {
      type: Boolean,
      default: true,
    },
    errorMessage: {
      type: String,
    },
    hint: {
      type: String,
    },
    isDatePickerRequired: {
      type: Boolean,
      default: true,
    },
    showOnlyDatePickerIcon: {
      type: Boolean,
      default: false,
    },
    popoverPlacement: {
      type: Object,
      default() {
        return {
          placement: "bottom-start",
        };
      },
    },
    calendarIcon: {
      type: Object,
      default() {
        return {
          iconName: "calendar-solid",
          type: "solid",
          viewBox: "0 0 20 20",
        };
      },
    },
    firstDayOfWeek: {
      type: Number,
      default: 2,
    },
    timezone: {
      type: String,
      default: null,
    },
    isInline: {
      type: Boolean,
      default: false,
    },
    //to trigger popover close manually
    manualHidePopover: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    const masks = {
      input: [
        "MMM DD, YYYY",
        "YYYY/MM/DD",
        "DD-MM-YYYY",
        "DD/MM/YYYY",
        "YYYY-MM-DD",
        "L",
      ],
    };
    return {
      masks,
      attrs: [
        {
          highlight: {
            color: "blue",
            fillMode: "outline",
          },
          dates: new Date(),
        },
      ],
    };
  },
  methods: {
    onDayClick(date) {
      this.$emit("input", date);
      if (this.manualHidePopover) {
        this.$refs.datepicker.hidePopover();
      }
    },
    handleInputBoxInput(input) {
      if (input.target.value.length == 0) {
        this.$emit("input", null);
      }
    },
    toggleDatePicker() {
      if (this.$refs.datepicker) {
        this.$refs.datepicker.togglePopover();
      }
    },
  },
};
</script>
