<template>
  <sar-popout-input
    v-model="inputValue"
    :placeholder="placeholder"
    :readonly="readonly"
    :disabled="disabled"
    :clearable="clearable"
    @clear="onClear"
    @click="onInputClick"
    :validate-event="validateEvent"
  />

  <sar-popout
    :root-class="rootClass"
    :root-style="rootStyle"
    :visible="innerVisible"
    @update:visible="onVisible"
    :title="title ?? placeholder"
    @confirm="onConfirm"
    @visible-hook="onVisibleHook"
  >
    <template #visible="{ already }">
      <sar-datetime-picker
        v-if="already"
        :model-value="popoutValue"
        @update:model-value="onChange"
        :type="type"
        :min="min"
        :max="max"
        :filter="filter"
        :formatter="formatter"
      />
    </template>
  </sar-popout>
</template>

<script lang="ts">
import { defineComponent as _defineComponent } from "vue";
import { ref, watch, computed } from "vue";
import SarPopoutInput from "../popout-input/popout-input.vue";
import SarPopout from "../popout/popout.vue";
import SarDatetimePicker from "../datetime-picker/datetime-picker.vue";
import { formatDate, isNullish } from "../utils";
import {
  getInitialValue,
  getMinDate,
  getMaxDate
} from "../datetime-picker/common";
import { datetimePickerInputProps, mapTypeFormat } from "./common";
const __default__ = {
  options: {
    virtualHost: true,
    styleIsolation: "shared"
  }
};
export default /* @__PURE__ */ _defineComponent({
  ...__default__,
  __name: "datetime-picker-input",
  props: datetimePickerInputProps,
  emits: ["update:visible", "update:model-value"],
  setup(__props, { expose: __expose, emit: __emit }) {
    __expose();
    const props = __props;
    const emit = __emit;
    const innerValue = ref(props.modelValue);
    watch(
      () => props.modelValue,
      () => {
        innerValue.value = props.modelValue;
      }
    );
    const popoutValue = ref(props.modelValue);
    const onChange = (value) => {
      popoutValue.value = value;
    };
    const onVisibleHook = (name) => {
      if (name === "enter" && !isNullish(innerValue.value) && popoutValue.value !== innerValue.value) {
        popoutValue.value = innerValue.value;
      }
    };
    const minDate = computed(() => props.min || getMinDate());
    const maxDate = computed(() => {
      const maxDate2 = props.max || getMaxDate();
      return maxDate2 < minDate.value ? new Date(minDate.value) : maxDate2;
    });
    const onConfirm = () => {
      if (isNullish(popoutValue.value)) {
        popoutValue.value = getInitialValue(minDate.value, maxDate.value);
      }
      innerValue.value = popoutValue.value;
      emit("update:model-value", popoutValue.value);
      inputValue.value = getInputValue();
    };
    const inputValue = ref("");
    function getOutletText(value) {
      if (!value) {
        return "";
      }
      return formatDate(
        value,
        props.outletFormat || mapTypeFormat[props.type]
      );
    }
    function getInputValue() {
      if (isNullish(innerValue.value)) {
        return "";
      }
      return getOutletText(innerValue.value);
    }
    watch(
      innerValue,
      () => {
        inputValue.value = getInputValue();
      },
      {
        immediate: true
      }
    );
    const onClear = () => {
      inputValue.value = "";
      innerValue.value = void 0;
      emit("update:model-value", void 0);
    };
    const innerVisible = ref(props.visible);
    watch(
      () => props.visible,
      () => {
        innerVisible.value = props.visible;
      }
    );
    const onVisible = (visible) => {
      innerVisible.value = visible;
      emit("update:visible", visible);
    };
    const onInputClick = () => {
      innerVisible.value = true;
      emit("update:visible", true);
    };
    const __returned__ = { props, emit, innerValue, popoutValue, onChange, onVisibleHook, minDate, maxDate, onConfirm, inputValue, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarPopout, SarDatetimePicker };
    return __returned__;
  }
});
</script>
