"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 shared_esmBundler = require("../../../../../../@vue/shared/dist/shared.esm-bundler.js");
const index = require("../../../../hooks/use-locale/index.js");
const index$1 = require("../../../../hooks/use-namespace/index.js");
const constants = require("../constants.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 panelTimeRange = require("../props/panel-time-range.js");
const Vue = require("vue");
const dayjs_min = require("../../../../../../../_virtual/dayjs.min.js");
const union = require("../../../../../../lodash-es/union.js");
const _hoisted_1 = ["disabled"];
var panel_time_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  __name: "panel-time-range",
  props: panelTimeRange.panelTimeRangeProps,
  emits: [
    "pick",
    "select-range",
    "set-picker-option"
  ],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const makeSelectRange = (start, end) => {
      const result = [];
      for (let i = start; i <= end; i++) result.push(i);
      return result;
    };
    const { t, lang } = index.useLocale();
    const nsTime = index$1.useNamespace("time");
    const nsPicker = index$1.useNamespace("picker");
    const pickerBase = Vue.inject(constants.PICKER_BASE_INJECTION_KEY);
    const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } = pickerBase.props;
    const startContainerKls = Vue.computed(() => [
      nsTime.be("range-picker", "body"),
      nsTime.be("panel", "content"),
      nsTime.is("arrow", arrowControl),
      showSeconds.value ? "has-seconds" : ""
    ]);
    const endContainerKls = Vue.computed(() => [
      nsTime.be("range-picker", "body"),
      nsTime.be("panel", "content"),
      nsTime.is("arrow", arrowControl),
      showSeconds.value ? "has-seconds" : ""
    ]);
    const startTime = Vue.computed(() => props.parsedValue[0]);
    const endTime = Vue.computed(() => props.parsedValue[1]);
    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 handleCancel = () => {
      const old = oldValue.value;
      emit("pick", old, false);
      Vue.nextTick(() => {
        oldValue.value = old;
      });
    };
    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 handleConfirm = (visible = false) => {
      emit("pick", [startTime.value, endTime.value], visible);
    };
    const handleMinChange = (date) => {
      handleChange(date.millisecond(0), endTime.value);
    };
    const handleMaxChange = (date) => {
      handleChange(startTime.value, date.millisecond(0));
    };
    const isValidValue = (_date) => {
      const parsedDate = _date.map((_) => dayjs_min.default(_).locale(lang.value));
      const result = getRangeAvailableTime(parsedDate);
      return parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1]);
    };
    const handleChange = (start, end) => {
      if (!props.visible) return;
      emit("pick", [start, end], true);
    };
    const btnConfirmDisabled = Vue.computed(() => {
      return startTime.value > endTime.value;
    });
    const selectionRange = Vue.ref([0, 2]);
    const setMinSelectionRange = (start, end) => {
      emit("select-range", start, end, "min");
      selectionRange.value = [start, end];
    };
    const offset = Vue.computed(() => showSeconds.value ? 11 : 8);
    const setMaxSelectionRange = (start, end) => {
      emit("select-range", start, end, "max");
      const _offset = Vue.unref(offset);
      selectionRange.value = [start + _offset, end + _offset];
    };
    const changeSelectionRange = (step) => {
      const list = showSeconds.value ? [
        0,
        3,
        6,
        11,
        14,
        17
      ] : [
        0,
        3,
        8,
        11
      ];
      const mapping = ["hours", "minutes"].concat(showSeconds.value ? ["seconds"] : []);
      const next = (list.indexOf(selectionRange.value[0]) + step + list.length) % list.length;
      const half = list.length / 2;
      if (next < half) timePickerOptions["start_emitSelectRange"](mapping[next]);
      else timePickerOptions["end_emitSelectRange"](mapping[next - half]);
    };
    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[`${selectionRange.value[0] < offset.value ? "start" : "end"}_scrollDown`](step);
        event$1.preventDefault();
        return;
      }
    };
    const disabledHours_ = (role, compare) => {
      const defaultDisable = disabledHours ? disabledHours(role) : [];
      const isStart = role === "start";
      const compareHour = (compare || (isStart ? endTime.value : startTime.value)).hour();
      return union.default(defaultDisable, isStart ? makeSelectRange(compareHour + 1, 23) : makeSelectRange(0, compareHour - 1));
    };
    const disabledMinutes_ = (hour, role, compare) => {
      const defaultDisable = disabledMinutes ? disabledMinutes(hour, role) : [];
      const isStart = role === "start";
      const compareDate = compare || (isStart ? endTime.value : startTime.value);
      if (hour !== compareDate.hour()) return defaultDisable;
      const compareMinute = compareDate.minute();
      return union.default(defaultDisable, isStart ? makeSelectRange(compareMinute + 1, 59) : makeSelectRange(0, compareMinute - 1));
    };
    const disabledSeconds_ = (hour, minute, role, compare) => {
      const defaultDisable = disabledSeconds ? disabledSeconds(hour, minute, role) : [];
      const isStart = role === "start";
      const compareDate = compare || (isStart ? endTime.value : startTime.value);
      const compareHour = compareDate.hour();
      const compareMinute = compareDate.minute();
      if (hour !== compareHour || minute !== compareMinute) return defaultDisable;
      const compareSecond = compareDate.second();
      return union.default(defaultDisable, isStart ? makeSelectRange(compareSecond + 1, 59) : makeSelectRange(0, compareSecond - 1));
    };
    const getRangeAvailableTime = ([start, end]) => {
      return [getAvailableTime(start, "start", true, end), getAvailableTime(end, "end", false, start)];
    };
    const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = useTimePicker.buildAvailableTimeSlotGetter(disabledHours_, disabledMinutes_, disabledSeconds_);
    const { timePickerOptions, getAvailableTime, onSetOption } = useTimePanel.useTimePanel({
      getAvailableHours,
      getAvailableMinutes,
      getAvailableSeconds
    });
    const parseUserInput = (days) => {
      if (!days) return null;
      if (shared_esmBundler.isArray(days)) return days.map((d) => dayjs_min.default(d, props.format).locale(lang.value));
      return dayjs_min.default(days, props.format).locale(lang.value);
    };
    const getDefaultValue = () => {
      if (shared_esmBundler.isArray(defaultValue)) return defaultValue.map((d) => dayjs_min.default(d).locale(lang.value));
      const defaultDay = dayjs_min.default(defaultValue).locale(lang.value);
      return [defaultDay, defaultDay.add(60, "m")];
    };
    emit("set-picker-option", ["parseUserInput", parseUserInput]);
    emit("set-picker-option", ["isValidValue", isValidValue]);
    emit("set-picker-option", ["handleKeydownInput", handleKeydown]);
    emit("set-picker-option", ["getDefaultValue", getDefaultValue]);
    emit("set-picker-option", ["getRangeAvailableTime", getRangeAvailableTime]);
    emit("set-picker-option", ["handleCancel", handleCancel]);
    return (_ctx, _cache) => {
      return _ctx.actualVisible ? (Vue.openBlock(), Vue.createElementBlock("div", {
        key: 0,
        class: Vue.normalizeClass([Vue.unref(nsTime).b("range-picker"), Vue.unref(nsPicker).b("panel")])
      }, [Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(nsTime).be("range-picker", "content")) }, [Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(nsTime).be("range-picker", "cell")) }, [Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(nsTime).be("range-picker", "header")) }, Vue.toDisplayString(Vue.unref(t)("el.datepicker.startTime")), 3), Vue.createElementVNode("div", { class: Vue.normalizeClass(startContainerKls.value) }, [Vue.createVNode(basicTimeSpinner.default, {
        ref: "minSpinner",
        role: "start",
        "show-seconds": showSeconds.value,
        "am-pm-mode": amPmMode.value,
        "arrow-control": Vue.unref(arrowControl),
        "spinner-date": startTime.value,
        "disabled-hours": disabledHours_,
        "disabled-minutes": disabledMinutes_,
        "disabled-seconds": disabledSeconds_,
        onChange: handleMinChange,
        onSetOption: Vue.unref(onSetOption),
        onSelectRange: setMinSelectionRange
      }, null, 8, [
        "show-seconds",
        "am-pm-mode",
        "arrow-control",
        "spinner-date",
        "onSetOption"
      ])], 2)], 2), Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(nsTime).be("range-picker", "cell")) }, [Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(nsTime).be("range-picker", "header")) }, Vue.toDisplayString(Vue.unref(t)("el.datepicker.endTime")), 3), Vue.createElementVNode("div", { class: Vue.normalizeClass(endContainerKls.value) }, [Vue.createVNode(basicTimeSpinner.default, {
        ref: "maxSpinner",
        role: "end",
        "show-seconds": showSeconds.value,
        "am-pm-mode": amPmMode.value,
        "arrow-control": Vue.unref(arrowControl),
        "spinner-date": endTime.value,
        "disabled-hours": disabledHours_,
        "disabled-minutes": disabledMinutes_,
        "disabled-seconds": disabledSeconds_,
        onChange: handleMaxChange,
        onSetOption: Vue.unref(onSetOption),
        onSelectRange: setMaxSelectionRange
      }, null, 8, [
        "show-seconds",
        "am-pm-mode",
        "arrow-control",
        "spinner-date",
        "onSetOption"
      ])], 2)], 2)], 2), Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(nsTime).be("panel", "footer")) }, [Vue.createElementVNode("button", {
        type: "button",
        class: Vue.normalizeClass([Vue.unref(nsTime).be("panel", "btn"), "cancel"]),
        onClick: _cache[0] || (_cache[0] = ($event) => handleCancel())
      }, Vue.toDisplayString(Vue.unref(t)("el.datepicker.cancel")), 3), Vue.createElementVNode("button", {
        type: "button",
        class: Vue.normalizeClass([Vue.unref(nsTime).be("panel", "btn"), "confirm"]),
        disabled: btnConfirmDisabled.value,
        onClick: _cache[1] || (_cache[1] = ($event) => handleConfirm())
      }, Vue.toDisplayString(Vue.unref(t)("el.datepicker.confirm")), 11, _hoisted_1)], 2)], 2)) : Vue.createCommentVNode("v-if", true);
    };
  }
});
exports.default = panel_time_range_vue_vue_type_script_setup_true_lang_default;
