import { ref, createVNode } from 'vue';
import '../../../../../utils/index.mjs';
import DatePanel from '../DatePanel/index.mjs';
import TimePanel from '../TimePanel/index.mjs';
import { tuple } from '../../utils/miscUtil.mjs';
import { setDateTime } from '../../utils/timeUtil.mjs';
import useMergeProps from '../../hooks/useMergeProps.mjs';
import { KeyCode } from '../../../../../utils/KeyCode.mjs';
import { classNames } from '../../../../../utils/dom/class.mjs';

const ACTIVE_PANEL = tuple("date", "time");
function DatetimePanel(_props) {
  const props = useMergeProps(_props);
  const {
    prefixCls,
    operationRef,
    generateConfig,
    value,
    defaultValue,
    disabledTime,
    showTime,
    onSelect
  } = props;
  const panelPrefixCls = `${prefixCls}-datetime-panel`;
  const activePanel = ref(null);
  const dateOperationRef = ref({});
  const timeOperationRef = ref({});
  const timeProps = typeof showTime === "object" ? {
    ...showTime
  } : {};
  function getNextActive(offset) {
    const activeIndex = ACTIVE_PANEL.indexOf(activePanel.value) + offset;
    const nextActivePanel = ACTIVE_PANEL[activeIndex] || null;
    return nextActivePanel;
  }
  const onBlur = (e) => {
    if (timeOperationRef.value.onBlur)
      timeOperationRef.value.onBlur(e);
    activePanel.value = null;
  };
  operationRef.value = {
    onKeydown: (event) => {
      if (event.which === KeyCode.TAB) {
        const nextActivePanel = getNextActive(event.shiftKey ? -1 : 1);
        activePanel.value = nextActivePanel;
        if (nextActivePanel)
          event.preventDefault();
        return true;
      }
      if (activePanel.value) {
        const ref2 = activePanel.value === "date" ? dateOperationRef : timeOperationRef;
        if (ref2.value && ref2.value.onKeydown)
          ref2.value.onKeydown(event);
        return true;
      }
      if ([KeyCode.LEFT, KeyCode.RIGHT, KeyCode.UP, KeyCode.DOWN].includes(event.which)) {
        activePanel.value = "date";
        return true;
      }
      return false;
    },
    onBlur,
    onClose: onBlur
  };
  const onInternalSelect = (date, source) => {
    let selectedDate = date;
    if (source === "date" && !value && timeProps.defaultValue) {
      selectedDate = generateConfig.setHour(selectedDate, generateConfig.getHour(timeProps.defaultValue));
      selectedDate = generateConfig.setMinute(selectedDate, generateConfig.getMinute(timeProps.defaultValue));
      selectedDate = generateConfig.setSecond(selectedDate, generateConfig.getSecond(timeProps.defaultValue));
    } else if (source === "time" && !value && defaultValue) {
      selectedDate = generateConfig.setYear(selectedDate, generateConfig.getYear(defaultValue));
      selectedDate = generateConfig.setMonth(selectedDate, generateConfig.getMonth(defaultValue));
      selectedDate = generateConfig.setDate(selectedDate, generateConfig.getDate(defaultValue));
    }
    if (onSelect)
      onSelect(selectedDate, "mouse");
  };
  const disabledTimes = disabledTime ? disabledTime(value || null) : {};
  return createVNode("div", {
    "class": classNames(panelPrefixCls, {
      [`${panelPrefixCls}-active`]: activePanel.value
    })
  }, [createVNode(DatePanel, {
    ...props,
    "operationRef": dateOperationRef,
    "active": activePanel.value === "date",
    "onSelect": (date) => {
      onInternalSelect(setDateTime(generateConfig, date, !value && typeof showTime === "object" ? showTime.defaultValue : null), "date");
    }
  }, null), createVNode(TimePanel, {
    ...props,
    "format": void 0,
    ...timeProps,
    ...disabledTimes,
    "disabledTime": null,
    "defaultValue": void 0,
    "operationRef": timeOperationRef,
    "active": activePanel.value === "time",
    "onSelect": (date) => {
      onInternalSelect(date, "time");
    }
  }, null)]);
}
DatetimePanel.displayName = "DatetimePanel";
DatetimePanel.inheritAttrs = false;

export { DatetimePanel as default };
//# sourceMappingURL=index.mjs.map
