import { defineComponent, inject, computed, ref, openBlock, createBlock, Transition, unref, withCtx, createElementBlock, normalizeClass, createVNode, Fragment, createElementVNode, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
import dayjs from 'dayjs';
import '../../../../constants/index.mjs';
import { ElButton } from '../../../button/index.mjs';
import '../../../../hooks/index.mjs';
import '../../../../utils/index.mjs';
import { panelTimePickerProps } from '../props/panel-time-picker.mjs';
import { useTimePanel } from '../composables/use-time-panel.mjs';
import { buildAvailableTimeSlotGetter } from '../composables/use-time-picker.mjs';
import TimeSpinner from './basic-time-spinner.mjs';
import _export_sfc from '../../../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
import { useLocale } from '../../../../hooks/use-locale/index.mjs';
import { isUndefined } from '../../../../utils/types.mjs';
import { EVENT_CODE } from '../../../../constants/aria.mjs';

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "panel-time-pick",
  props: panelTimePickerProps,
  emits: ["pick", "select-range", "set-picker-option"],
  setup(__props, { emit }) {
    const props = __props;
    const pickerBase = inject("EP_PICKER_BASE");
    const { disabledHours, disabledMinutes, disabledSeconds } = pickerBase.value;
    const defaultValue = computed(() => {
      return pickerBase.value.defaultValue;
    });
    const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = buildAvailableTimeSlotGetter(disabledHours, disabledMinutes, disabledSeconds);
    const ns = useNamespace("time");
    const { t, lang } = useLocale();
    const selectionRange = ref([0, 2]);
    const transitionName = computed(() => {
      return isUndefined(props.actualVisible) ? `${ns.namespace.value}-zoom-in-top` : "";
    });
    const showSeconds = computed(() => {
      return props.format.includes("ss");
    });
    const amPmMode = computed(() => {
      if (props.format.includes("A"))
        return "A";
      if (props.format.includes("a"))
        return "a";
      return "";
    });
    const isValidValue = (_date) => {
      const parsedDate = dayjs(_date).locale(lang.value);
      const result = getRangeAvailableTime(parsedDate);
      return parsedDate.isSame(result);
    };
    const changeToNow = () => {
      emit("pick", dayjs().locale(lang.value), false);
    };
    const handleConfirm = (visible = false, first = false) => {
      if (first)
        return;
      emit("pick", props.parsedValue, visible);
    };
    const handleChange = (_date) => {
      if (!props.visible && !props.justSpinner) {
        return;
      }
      const result = getRangeAvailableTime(_date).millisecond(0);
      emit("pick", result, true);
    };
    const setSelectionRange = (start, end) => {
      emit("select-range", start, end);
      selectionRange.value = [start, end];
    };
    const changeSelectionRange = (step) => {
      const list = [0, 3].concat(showSeconds.value ? [6] : []);
      const mapping = ["hours", "minutes"].concat(showSeconds.value ? ["seconds"] : []);
      const index = list.indexOf(selectionRange.value[0]);
      const next = (index + step + list.length) % list.length;
      timePickerOptions["start_emitSelectRange"](mapping[next]);
    };
    const handleKeydown = (event) => {
      const code = event.code;
      const { left, right, up, down } = EVENT_CODE;
      if ([left, right].includes(code)) {
        const step = code === left ? -1 : 1;
        changeSelectionRange(step);
        event.preventDefault();
        return;
      }
      if ([up, down].includes(code)) {
        const step = code === up ? -1 : 1;
        timePickerOptions["start_scrollDown"](step);
        event.preventDefault();
        return;
      }
    };
    const { timePickerOptions, onSetOption, getAvailableTime } = useTimePanel({
      getAvailableHours,
      getAvailableMinutes,
      getAvailableSeconds
    });
    const getRangeAvailableTime = (date) => {
      return getAvailableTime(date, props.datetimeRole || "", true);
    };
    const parseUserInput = (value) => {
      if (!value)
        return null;
      return dayjs(value, props.format).locale(lang.value);
    };
    const formatToString = (value) => {
      if (!value)
        return null;
      return value.format(props.format);
    };
    const getDefaultValue = () => {
      return dayjs(defaultValue.value).locale(lang.value);
    };
    emit("set-picker-option", ["isValidValue", isValidValue]);
    emit("set-picker-option", ["formatToString", formatToString]);
    emit("set-picker-option", ["parseUserInput", parseUserInput]);
    emit("set-picker-option", ["handleKeydownInput", handleKeydown]);
    emit("set-picker-option", ["getRangeAvailableTime", getRangeAvailableTime]);
    emit("set-picker-option", ["getDefaultValue", getDefaultValue]);
    return (_ctx, _cache) => {
      return openBlock(), createBlock(Transition, { name: unref(transitionName) }, {
        default: withCtx(() => [
          _ctx.justSpinner ? (openBlock(), createElementBlock("div", {
            key: 0,
            class: normalizeClass([unref(ns).be("panel", "content"), { "has-seconds": unref(showSeconds) }])
          }, [
            createVNode(TimeSpinner, {
              ref: "spinner",
              role: _ctx.datetimeRole || "start",
              "arrow-control": false,
              "show-seconds": unref(showSeconds),
              "am-pm-mode": unref(amPmMode),
              "spinner-date": _ctx.parsedValue,
              "disabled-hours": unref(disabledHours),
              "disabled-minutes": unref(disabledMinutes),
              "disabled-seconds": unref(disabledSeconds),
              onChange: handleChange,
              onSetOption: unref(onSetOption),
              onSelectRange: setSelectionRange
            }, null, 8, ["role", "show-seconds", "am-pm-mode", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onSetOption"])
          ], 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
            _ctx.actualVisible || _ctx.visible ? (openBlock(), createElementBlock("div", {
              key: 0,
              class: normalizeClass(unref(ns).b("panel"))
            }, [
              createElementVNode("div", {
                class: normalizeClass([unref(ns).be("panel", "content"), { "has-seconds": unref(showSeconds) }])
              }, [
                createVNode(TimeSpinner, {
                  ref: "spinner",
                  role: _ctx.datetimeRole || "start",
                  "arrow-control": unref(pickerBase).arrowControl,
                  "show-seconds": unref(showSeconds),
                  "am-pm-mode": unref(amPmMode),
                  "spinner-date": _ctx.parsedValue,
                  "disabled-hours": unref(disabledHours),
                  "disabled-minutes": unref(disabledMinutes),
                  "disabled-seconds": unref(disabledSeconds),
                  onChange: handleChange,
                  onSetOption: unref(onSetOption),
                  onSelectRange: setSelectionRange
                }, null, 8, ["role", "arrow-control", "show-seconds", "am-pm-mode", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onSetOption"])
              ], 2),
              createElementVNode("div", {
                class: normalizeClass(unref(ns).be("panel", "footer"))
              }, [
                createVNode(unref(ElButton), {
                  class: normalizeClass([unref(ns).be("panel", "btn"), "cancel"]),
                  size: "small",
                  onClick: changeToNow
                }, {
                  default: withCtx(() => [
                    createTextVNode(toDisplayString(unref(t)("el.datepicker.now")), 1)
                  ]),
                  _: 1
                }, 8, ["class"]),
                createVNode(unref(ElButton), {
                  type: "primary",
                  class: normalizeClass([unref(ns).be("panel", "btn"), "confirm"]),
                  size: "small",
                  onClick: _cache[0] || (_cache[0] = ($event) => handleConfirm())
                }, {
                  default: withCtx(() => [
                    createTextVNode(toDisplayString(unref(t)("el.datepicker.confirm")), 1)
                  ]),
                  _: 1
                }, 8, ["class"])
              ], 2)
            ], 2)) : createCommentVNode("v-if", true)
          ], 64))
        ]),
        _: 1
      }, 8, ["name"]);
    };
  }
});
var TimePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/kimihiro/workfiles/dingdandao/element-plus/packages/components/time-picker/src/time-picker-com/panel-time-pick.vue"]]);

export { TimePickPanel as default };
//# sourceMappingURL=panel-time-pick.mjs.map
