"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const aria = require("../../../../constants/aria.js");
const event = require("../../../../utils/dom/event.js");
const types = require("../../../../utils/types.js");
const index$1 = require("../../../../hooks/use-locale/index.js");
const index = require("../../../../hooks/use-namespace/index.js");
const constants = require("../constants.js");
const panelTimePicker = require("../props/panel-time-picker.js");
const useTimePanel = require("../composables/use-time-panel.js");
const useTimePicker = require("../composables/use-time-picker.js");
const basicTimeSpinner = require("./basic-time-spinner.js");
const Vue = require("vue");
const dayjs_min = require("../../../../../../../_virtual/dayjs.min.js");
var panel_time_pick_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  __name: "panel-time-pick",
  props: panelTimePicker.panelTimePickerProps,
  emits: [
    "pick",
    "select-range",
    "set-picker-option"
  ],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const pickerBase = Vue.inject(constants.PICKER_BASE_INJECTION_KEY);
    const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } = pickerBase.props;
    const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = useTimePicker.buildAvailableTimeSlotGetter(disabledHours, disabledMinutes, disabledSeconds);
    const ns = index.useNamespace("time");
    const { t, lang } = index$1.useLocale();
    const selectionRange = Vue.ref([0, 2]);
    const oldValue = useTimePicker.useOldValue(props, {
      modelValue: Vue.computed(() => pickerBase.props.modelValue),
      valueOnClear: Vue.computed(() => (pickerBase == null ? void 0 : pickerBase.emptyValues) ? pickerBase.emptyValues.valueOnClear.value : null)
    });
    const transitionName = Vue.computed(() => {
      return types.isUndefined(props.actualVisible) ? `${ns.namespace.value}-zoom-in-top` : "";
    });
    const showSeconds = Vue.computed(() => {
      return props.format.includes("ss");
    });
    const amPmMode = Vue.computed(() => {
      if (props.format.includes("A")) return "A";
      if (props.format.includes("a")) return "a";
      return "";
    });
    const isValidValue = (_date) => {
      const parsedDate = dayjs_min.default(_date).locale(lang.value);
      const result = getRangeAvailableTime(parsedDate);
      return parsedDate.isSame(result);
    };
    const handleCancel = () => {
      const old = oldValue.value;
      emit("pick", old, false);
      Vue.nextTick(() => {
        oldValue.value = old;
      });
    };
    const handleConfirm = (visible = false, first = false) => {
      if (first) return;
      emit("pick", props.parsedValue, visible);
    };
    const handleChange = (_date) => {
      if (!props.visible) return;
      emit("pick", getRangeAvailableTime(_date).millisecond(0), true);
    };
    const setSelectionRange = (start, end) => {
      emit("select-range", start, end);
      selectionRange.value = [start, end];
    };
    const changeSelectionRange = (step) => {
      const actualFormat = props.format;
      const hourIndex = actualFormat.indexOf("HH");
      const minuteIndex = actualFormat.indexOf("mm");
      const secondIndex = actualFormat.indexOf("ss");
      const list = [];
      const mapping = [];
      if (hourIndex !== -1) {
        list.push(hourIndex);
        mapping.push("hours");
      }
      if (minuteIndex !== -1) {
        list.push(minuteIndex);
        mapping.push("minutes");
      }
      if (secondIndex !== -1 && showSeconds.value) {
        list.push(secondIndex);
        mapping.push("seconds");
      }
      const next = (list.indexOf(selectionRange.value[0]) + step + list.length) % list.length;
      timePickerOptions["start_emitSelectRange"](mapping[next]);
    };
    const handleKeydown = (event$1) => {
      const code = event.getEventCode(event$1);
      const { left, right, up, down } = aria.EVENT_CODE;
      if ([left, right].includes(code)) {
        changeSelectionRange(code === left ? -1 : 1);
        event$1.preventDefault();
        return;
      }
      if ([up, down].includes(code)) {
        const step = code === up ? -1 : 1;
        timePickerOptions["start_scrollDown"](step);
        event$1.preventDefault();
        return;
      }
    };
    const { timePickerOptions, onSetOption, getAvailableTime } = useTimePanel.useTimePanel({
      getAvailableHours,
      getAvailableMinutes,
      getAvailableSeconds
    });
    const getRangeAvailableTime = (date) => {
      return getAvailableTime(date, props.datetimeRole || "", true);
    };
    const parseUserInput = (value) => {
      if (!value) return null;
      return dayjs_min.default(value, props.format).locale(lang.value);
    };
    const getDefaultValue = () => {
      return dayjs_min.default(defaultValue).locale(lang.value);
    };
    emit("set-picker-option", ["isValidValue", isValidValue]);
    emit("set-picker-option", ["parseUserInput", parseUserInput]);
    emit("set-picker-option", ["handleKeydownInput", handleKeydown]);
    emit("set-picker-option", ["getRangeAvailableTime", getRangeAvailableTime]);
    emit("set-picker-option", ["getDefaultValue", getDefaultValue]);
    emit("set-picker-option", ["handleCancel", handleCancel]);
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createBlock(Vue.Transition, { name: transitionName.value }, {
        default: Vue.withCtx(() => [_ctx.actualVisible || _ctx.visible ? (Vue.openBlock(), Vue.createElementBlock("div", {
          key: 0,
          class: Vue.normalizeClass(Vue.unref(ns).b("panel"))
        }, [Vue.createElementVNode("div", { class: Vue.normalizeClass([Vue.unref(ns).be("panel", "content"), { "has-seconds": showSeconds.value }]) }, [Vue.createVNode(basicTimeSpinner.default, {
          ref: "spinner",
          role: _ctx.datetimeRole || "start",
          "arrow-control": Vue.unref(arrowControl),
          "show-seconds": showSeconds.value,
          "am-pm-mode": amPmMode.value,
          "spinner-date": _ctx.parsedValue,
          "disabled-hours": Vue.unref(disabledHours),
          "disabled-minutes": Vue.unref(disabledMinutes),
          "disabled-seconds": Vue.unref(disabledSeconds),
          onChange: handleChange,
          onSetOption: Vue.unref(onSetOption),
          onSelectRange: setSelectionRange
        }, null, 8, [
          "role",
          "arrow-control",
          "show-seconds",
          "am-pm-mode",
          "spinner-date",
          "disabled-hours",
          "disabled-minutes",
          "disabled-seconds",
          "onSetOption"
        ])], 2), Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(ns).be("panel", "footer")) }, [Vue.createElementVNode("button", {
          type: "button",
          class: Vue.normalizeClass([Vue.unref(ns).be("panel", "btn"), "cancel"]),
          onClick: handleCancel
        }, Vue.toDisplayString(Vue.unref(t)("el.datepicker.cancel")), 3), Vue.createElementVNode("button", {
          type: "button",
          class: Vue.normalizeClass([Vue.unref(ns).be("panel", "btn"), "confirm"]),
          onClick: _cache[0] || (_cache[0] = ($event) => handleConfirm())
        }, Vue.toDisplayString(Vue.unref(t)("el.datepicker.confirm")), 3)], 2)], 2)) : Vue.createCommentVNode("v-if", true)]),
        _: 1
      }, 8, ["name"]);
    };
  }
});
exports.default = panel_time_pick_vue_vue_type_script_setup_true_lang_default;
