<template>
  <div>
    <date-picker
      class="l-datepicker"
      :color="state == 'white' ? 'neutral' : state"
      :value="value"
      :mode="mode"
      :is-range="isRange"
      :is24hr="is24hr"
      :minute-increment="minuteIncrement"
      :valid-hours="validHours"
      :is-required="isRequired"
      @input="onInput"
      :min-date="minDate"
      :max-date="maxDate"
      :disabled-dates="disabledDates"
      :modelConfig="modelConfig"
    >
      <template v-if="!isInline" v-slot="{ inputValue, togglePopover }">
        <l-input
          :value="inputValue"
          @focus="togglePopover()"
          :state="inputState"
          :label="label"
          :placeholder="placeholder"
          :pill="pill"
          :size="size"
          :note="note"
          :disabled="disabled"
          @input.prevent
          @keydown.prevent
        />
      </template>
    </date-picker>
  </div>
</template>

<script>
import DatePicker from "v-calendar/lib/components/date-picker.umd";
import LInput from "../atoms/LInput.vue";
export default {
  name: "l-datepicker",
  components: {
    DatePicker,
    LInput,
  },
  props: {
    value: {
      type: [Date, Object, String],
      required: false,
    },
    /**
     * The label of the input.
     */
    label: {
      type: String,
    },
    /**
     * The placeholder of the input.
     *
     * If placeholder has been added, the label will always show at the top of the field.
     */
    placeholder: {
      type: String,
    },
    /**
     * The colour/state of the picker.
     */
    state: {
      type: String,
      default: "secondary",
      validator: function (value) {
        return (
          [
            "success",
            "warning",
            "danger",
            "primary",
            "secondary",
            "tertiary",
            "neutral",
            "white",
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The colour/state of the input.
     */
    inputState: {
      type: String,
      default: "neutral",
      validator: function (value) {
        return (
          [
            "success",
            "warning",
            "danger",
            "primary",
            "secondary",
            "tertiary",
            "neutral",
            "white",
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * Selection mode: `"date"`, `"dateTime"`, `"time"`
     */
    mode: {
      type: String,
      default: "date",
      validator: function (value) {
        return ["date", "dateTime", "time"].indexOf(value) !== -1;
      },
    },
    /**
     * Used to set default configurations
     */
    modelConfig: {
      type: Object
    },
    /**
     * Show the datepicker directly instead of as a popover.
     */
    isInline: {
      type: Boolean,
      default: false,
    },
    /**
     * Date value is a date range object.
     */
    isRange: {
      type: Boolean,
      default: false,
    },
    /**
     * Min date that can be selected
     *
     * for "today" use `new Date()`
     */
    minDate: {
      type: Date,
    },
    /**
     * Max date that can be selected
     *
     * for "today" use `new Date()`
     */
    maxDate: {
      type: Date,
    },
    /**
     * You can use a full date expression to specify a set of disabled dates. That is, a date object, date range object, date pattern or an array of either of these may be used.
     */
    disabledDates: {
      type: [Object, Array]
    },
    /**
     * Use 24-hr time picker and input format.
     */
    is24hr: {
      type: Boolean,
      default: false,
    },
    /**
     * Increment amount for the minute select options.
     */
    minuteIncrement: {
      type: Number,
      default: 1,
    },
    /**
     * Set a range of valid hours, list of valid hours or a function that returns if an hour is valid.
     *
     * **Object**
     *
     * An object should configure a `min` and/or `max` prop. For example, `{min: 7 max: 22}`
     *
     * **Array**
     *
     * An array should configure any acceptable hours. For example: `[0, 3, 4, 5, 10, 15, 16, 17]`
     *
     */
    validHours: {
      type: [Object, Array],
    },
    /**
     * Prevents the user from clearing the selected value.
     *
     * **Tip**
     *
     * Setting `value = null` still allowed through code.
     */
    isRequired: {
      type: Boolean,
      default: false,
    },
    /**
     * Pill style input
     */
    pill: {
      type: Boolean,
      default: false,
    },
    /**
     * The size of the input.
     */
    size: {
      type: String,
      default: "medium",
      validator: function (value) {
        return ["small", "medium", "large"].indexOf(value) !== -1;
      },
    },
    /**
     * Disable input and click event
     */
    disabled: {
      type: Boolean,
      default: false,
    },
    /**
     * The note of the form input field, it could be a hint, error or success message.
     */
    note: {
      type: String,
      default: "",
    },
  },
  methods: {
    onInput(value) {
      this.$emit("input", value);
    },
    onManualInput(value) {
      const date = value.split("/");
      const year = date[2];
      const month = date[1];
      const day = date[0];

      this.$emit(
        "input",
        new Date(Number(year), Number(month) - 1, Number(day))
      );
    },
  },
};
</script>
<style>
.l-datepicker {
  display: block;
  position: relative;
}
.l-datepicker.vc-container,
.l-datepicker .vc-container {
  --white: var(--white-unq);
  --black: var(--neutral-900);
  --gray-100: var(--neutral-100);
  --gray-200: var(--neutral-200);
  --gray-300: var(--neutral-300);
  --gray-400: var(--neutral-400);
  --gray-500: var(--neutral-500);
  --gray-600: var(--neutral-600);
  --gray-700: var(--neutral-700);
  --gray-800: var(--neutral-800);
  --gray-900: var(--neutral-900);

  --accent-600: var(--primary-600);

  --text-xs: var(--sizing-xs);
  --text-sm: var(--sizing-sm);
  --text-base: var(--sizing-base);
  --text-lg: var(--sizing-lg);
  --leading-snug: 1.375;
  --rounded: var(--radius-base);
  --rounded-lg: var(--radius-lg);
  --rounded-full: var(--radius-full);

  border-color: var(--gray-100);
}
.l-datepicker.vc-container .vc-time-picker.vc-bordered,
.l-datepicker .vc-container .vc-time-picker.vc-bordered {
  border-color: var(--gray-100);
}
.l-datepicker.vc-container .vc-select select,
.l-datepicker .vc-container .vc-select select {
  background-color: var(--white);
  border-color: var(--gray-100);
  border-width: 1px;
}
.l-datepicker.vc-container .vc-am-pm,
.l-datepicker .vc-container .vc-am-pm {
  background-color: var(--white);
  border: 1px solid var(--gray-100);
}
.l-datepicker.vc-container .vc-am-pm button.active,
.l-datepicker .vc-container .vc-am-pm button.active {
  background-color: var(--gray-100);
  border-width: 0;
  color: var(--gray-900);
}

.l-datepicker .vc-popover-content-wrapper {
  top: 100%;
}

.l-datepicker .vc-time-picker .vc-date {
  display: none;
}
</style>
