import { ref, computed, watch, createVNode, Fragment, mergeProps } from "vue";
import "./styles/date-picker.scss";
import { useProxiedModel } from "../../composables/proxied-model/index.mjs";
import { Input } from "../input/input.mjs";
import { DatePickerPanel } from "./date-picker-panel.mjs";
import { DateRangePickerPanel } from "./date-range-picker-panel.mjs";
import { Menu } from "../menu/menu.mjs";
import { genericComponent } from "../../utils/define-component.mjs";
import { getUid, wrapInArray, keyValues } from "../../utils/dist/index.mjs";
const DatePicker = genericComponent()({
  name: "VeDatePicker",
  props: {
    appendInnerIcon: {
      type: String,
      default: "$calendar"
    },
    format: [Array, String, Function],
    id: String,
    modelValue: {
      type: [String, Array],
      default: () => []
    },
    openOnClear: Boolean,
    panelProps: Object,
    readonly: Boolean,
    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() {
      var _a;
      (_a = inputRef.value) == null ? void 0 : _a.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
