<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"
    :show-confirm="showConfirm"
    :confirm-disabled="confirmDisabled"
    @confirm="onConfirm"
  >
    <template #visible="{ already }">
      <sar-calendar
        v-if="already"
        :model-value="popoutValue"
        @update:model-value="onChange"
        :type="type"
        :min="min"
        :max="max"
        :current-date="currentDate"
        :disabled-date="disabledDate"
        :max-days="maxDays"
        :over-max-days="overMaxDays"
        :week-starts-on="weekStartsOn"
        :formatter="formatter"
        :allow-same-day="allowSameDay"
        :several-months="severalMonths"
      />
    </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 SarCalendar from "../calendar/calendar.vue";
import SarPopout from "../popout/popout.vue";
import { formatDate } from "../utils";
import { useTranslate } from "../locale";
import { calendarInputProps } from "./common";
const __default__ = {
  options: {
    virtualHost: true,
    styleIsolation: "shared"
  }
};
export default /* @__PURE__ */ _defineComponent({
  ...__default__,
  __name: "calendar-input",
  props: calendarInputProps,
  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);
    watch(innerValue, () => {
      popoutValue.value = innerValue.value;
    });
    const confirmDisabled = computed(() => {
      const value = popoutValue.value;
      return !value || Array.isArray(value) && value.length === 0;
    });
    const onConfirm = () => {
      innerValue.value = popoutValue.value;
      emit("update:model-value", popoutValue.value);
      inputValue.value = getInputValue();
    };
    const onChange = (value) => {
      popoutValue.value = value;
      if (!props.showConfirm && !confirmDisabled.value) {
        onConfirm();
        innerVisible.value = false;
      }
    };
    const inputValue = ref("");
    const format = "YYYY-MM-DD";
    const { t } = useTranslate("calendar");
    function getOutletText(date, type) {
      if (type === "single") {
        return formatDate(date, format);
      }
      if (type === "range") {
        return `${formatDate(date[0], format)} ${t("to")} ${formatDate(
          date[1],
          format
        )}`;
      }
      if (type === "multiple") {
        return t("multipleOutlet", {
          count: date.length
        });
      }
      return "";
    }
    function getInputValue() {
      if (!innerValue.value || Array.isArray(innerValue.value) && innerValue.value.length === 0) {
        return "";
      }
      return getOutletText(innerValue.value, props.type);
    }
    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, confirmDisabled, onConfirm, onChange, inputValue, format, t, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarCalendar, SarPopout };
    return __returned__;
  }
});
</script>
