<template>
  <sar-picker
    :root-class="classNames(rootClass)"
    :root-style="stringifyStyle(rootStyle)"
    :columns="columns"
    :model-value="pickerValue"
    @update:model-value="onChange"
  />
</template>

<script lang="ts">
import { defineComponent as _defineComponent } from "vue";
import { computed, ref, watch } from "vue";
import { classNames, stringifyStyle } from "../utils";
import SarPicker from "../picker/picker.vue";
import {
  correctDate,
  getBoundaryValue,
  getMaxDate,
  getMinDate,
  letterArray,
  strategies,
  getColumnData,
  datetimePickerProps
} from "./common";
import { useTranslate } from "../locale";
const __default__ = {
  options: {
    virtualHost: true,
    styleIsolation: "shared"
  }
};
export default /* @__PURE__ */ _defineComponent({
  ...__default__,
  __name: "datetime-picker",
  props: datetimePickerProps,
  emits: ["update:model-value"],
  setup(__props, { expose: __expose, emit: __emit }) {
    __expose();
    const props = __props;
    const emit = __emit;
    const { t } = useTranslate("datetimePicker");
    const createColumnData = (types, currentDate) => {
      minValues = getBoundaryValue(false, minDate.value, currentDate);
      maxValues = getBoundaryValue(true, maxDate.value, currentDate);
      const getColumnDataByType = (letter) => {
        const strategy = strategies[letter];
        const index = strategy[0];
        return getColumnData(
          maxValues[index] - minValues[index] + 1,
          minValues[index],
          strategy[1],
          letter,
          currentDate,
          t,
          props.filter,
          props.formatter
        );
      };
      return types.map(
        (letter) => columnsMap[letter] = getColumnDataByType(letter)
      );
    };
    const getChangedLetter = (currentDate) => {
      const min = getBoundaryValue(false, minDate.value, currentDate);
      const max = getBoundaryValue(true, maxDate.value, currentDate);
      return letterArray.filter(
        (_, i) => min[i] !== minValues[i] || max[i] !== maxValues[i]
      );
    };
    const updateColumns = (currentDate) => {
      const changedLetter = getChangedLetter(currentDate);
      if (changedLetter.length) {
        const changedColumns = createColumnData(changedLetter, currentDate);
        const nextColumns = innerType.value.map((letter) => {
          for (let i = 0, l = changedLetter.length; i < l; i++) {
            if (changedLetter[i] === letter) {
              return changedColumns[i];
            }
          }
          return columnsMap[letter];
        });
        columns.value = nextColumns;
      }
    };
    const getDateByPickerValue = (value) => {
      const currEvery = letterArray.map((letter) => {
        const stratery = strategies[letter];
        for (let i = 0, l = innerType.value.length; i < l; i++) {
          if (innerType.value[i] === letter) {
            return value[i];
          }
        }
        return stratery[4](innerValue.value);
      });
      correctDate(currEvery, minDate.value, maxDate.value);
      currEvery[1]--;
      const date = new Date(...currEvery);
      return date;
    };
    const normalizeValue = (value) => {
      value = value ?? /* @__PURE__ */ new Date();
      return value.getTime() < minDate.value.getTime() ? minDate.value : value.getTime() > maxDate.value.getTime() ? maxDate.value : value;
    };
    const innerType = computed(() => {
      return props.type.split("");
    });
    const minDate = computed(() => props.min || getMinDate());
    const maxDate = computed(() => {
      const maxDate2 = props.max || getMaxDate();
      return maxDate2 < minDate.value ? new Date(minDate.value) : maxDate2;
    });
    const innerValue = ref(normalizeValue(props.modelValue));
    watch(
      () => props.modelValue,
      () => {
        innerValue.value = normalizeValue(props.modelValue);
        if (props.modelValue) {
          updateColumns(props.modelValue);
        }
      }
    );
    const pickerValue = computed(() => {
      return innerType.value.map((letter) => {
        return strategies[letter][4](innerValue.value);
      });
    });
    const columnsMap = {};
    let minValues = [];
    let maxValues = [];
    const columns = ref(createColumnData(innerType.value, innerValue.value));
    const onChange = (value) => {
      const nextValue = getDateByPickerValue(value);
      innerValue.value = nextValue;
      updateColumns(nextValue);
      emit("update:model-value", nextValue);
    };
    const __returned__ = { props, emit, t, createColumnData, getChangedLetter, updateColumns, getDateByPickerValue, normalizeValue, innerType, minDate, maxDate, innerValue, pickerValue, columnsMap, get minValues() {
      return minValues;
    }, set minValues(v) {
      minValues = v;
    }, get maxValues() {
      return maxValues;
    }, set maxValues(v) {
      maxValues = v;
    }, columns, onChange, get classNames() {
      return classNames;
    }, get stringifyStyle() {
      return stringifyStyle;
    }, SarPicker };
    return __returned__;
  }
});
</script>
