import { createVNode as _createVNode, mergeProps as _mergeProps, Fragment as _Fragment } from "vue";
import "./styles/date-picker.css";
import { computed, ref, watch } from "vue";
import { getUid, keyValues, wrapInArray } from "@veno-ui/utils";
import { genericComponent } from "../../utils";
import { useProxiedModel } from "../../composables/proxied-model";
import { Input } from "../input/input";
import { Menu } from "../menu";
import { DatePickerPanel } from "./date-picker-panel";
import { DateRangePickerPanel } from "./date-range-picker-panel";
const DatePicker = genericComponent()({
  name: "VeDatePicker",
  props: {
    /**
     * @zh 输入框后追加的图标
     */
    appendInnerIcon: {
      type: String,
      default: "$calendar"
    },
    /**
     * @zh 时间格式化
     */
    format: [Array, String, Function],
    /**
     * @zh 输入框ID
     */
    id: String,
    /**
     * @zh 绑定值
     */
    modelValue: {
      type: [String, Array],
      default: () => []
    },
    /**
     * @zh 点击清除后是否展开菜单面板
     */
    openOnClear: Boolean,
    /**
     * @zh 面板的属性
     */
    panelProps: Object,
    /**
     * @zh 只读
     */
    readonly: Boolean,
    /**
     * @zh 开启范围时间选择
     */
    range: Boolean
  },
  emits: {
    "update:modelValue": (_modelValue) => true,
    "change": (_modelValue) => true
  },
  setup(props, {
    slots,
    emit
  }) {
    const activator = ref();
    const inputRef = ref();
    const isActiveMenu = ref(false);
    const id = computed(() => props.id || `ve-date-picker-${getUid()}`);
    const model = useProxiedModel(props, "modelValue", [], (v) => wrapInArray(v), (v) => props.range ? v : v[0]);
    const panelProps = computed(() => {
      const panelProps2 = {
        ...props.panelProps
      };
      if (props.format) {
        panelProps2.format = props.format;
      }
      return panelProps2;
    });
    watch(() => inputRef.value, (val) => {
      activator.value = val.$el.querySelector(".ve-input-control");
    });
    function onClear(_e) {
      model.value = [];
      if (props.openOnClear) {
        isActiveMenu.value = true;
      }
    }
    function onKeydown({
      key
    }) {
      if ([keyValues.enter, keyValues.space].includes(key) && !isActiveMenu.value) {
        isActiveMenu.value = true;
      }
      if (key === keyValues.esc && isActiveMenu.value) {
        isActiveMenu.value = false;
      }
    }
    function blur() {
      inputRef.value?.blur();
    }
    function onChange() {
      emit("change", props.range ? model.value : model.value[0]);
    }
    return () => {
      return _createVNode(Input, {
        "appendInnerIcon": props.appendInnerIcon,
        "class": ["ve-date-picker", {
          "ve-date-picker--active-menu": isActiveMenu.value
        }],
        "id": id.value,
        "modelValue": model.value.join(" ~ ") || void 0,
        "onClick:clear": onClear,
        "onClick:control": () => {
          if (props.readonly)
            return;
          if (isActiveMenu.value) {
            blur();
          } else {
            isActiveMenu.value = true;
          }
        },
        "onBlur": () => isActiveMenu.value = false,
        "onKeydown": onKeydown,
        "onMousedown": (e) => e.preventDefault(),
        "ref": inputRef,
        "readonly": true
      }, {
        ...slots,
        default: () => _createVNode(_Fragment, null, [activator.value && _createVNode(Menu, {
          "contentClass": "ve-date-picker-menu-wrapper",
          "id": `${id.value}-menu`,
          "modelValue": isActiveMenu.value,
          "onUpdate:modelValue": ($event) => isActiveMenu.value = $event,
          "activator": activator.value,
          "openOnClick": false
        }, {
          default: () => [!props.range && _createVNode(DatePickerPanel, _mergeProps(panelProps.value, {
            "modelValue": model.value[0],
            "onUpdate:modelValue": (val) => {
              model.value = [val];
              blur();
              onChange();
            }
          }), null), props.range && _createVNode(DateRangePickerPanel, _mergeProps(panelProps.value, {
            "modelValue": model.value,
            "onUpdate:modelValue": ($event) => model.value = $event,
            "onPreview": (v) => {
              if (!v) {
                blur();
                onChange();
              }
            }
          }), null)]
        })])
      });
    };
  }
});
export {
  DatePicker
};
//# sourceMappingURL=date-picker.mjs.map
