import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
import "./styles/date-picker-panel.css";
import { computed, inject, ref, watch } from "vue";
import { createRange, wrapInArray } from "@veno-ui/utils";
import { defineComponent } from "../../utils";
import { Card } from "../card";
import { Button } from "../button";
import { useProxiedModel } from "../../composables/proxied-model";
import { createDate } from "../../composables/date";
import { DateRangeKey } from "./key";
const ROWS_COUNT = 6;
const COLS_COUNT = 7;
const CELLS_COUNT = ROWS_COUNT * COLS_COUNT;
const WEEKDAYS = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
const DatePickerPanel = defineComponent({
  name: "VeDatePickerPanel",
  props: {
    /**
     * @zh 激活的日期的按钮颜色
     */
    activeColor: {
      type: String,
      default: "primary"
    },
    /**
     * @zh 每周的第一天是周几（0 - 周日、1 - 周一）。
     */
    firstDayOfWeek: {
      type: [String, Number],
      default: 0,
      validator: (val) => Number(val) in WEEKDAYS
    },
    /**
     * @zh 时间格式化
     */
    format: {
      type: [String, Function],
      default: "YYYY-MM-DD"
    },
    /**
     * @zh 最大时间值
     */
    max: String,
    /**
     * @zh 最小时间值
     */
    min: String,
    /**
     * @zh 时间值
     */
    modelValue: String,
    /**
     * @zh 双箭头往前翻页图标
     */
    prevDoubleIcon: {
      type: String,
      default: "$prevDouble"
    },
    /**
     * @zh 单箭头往前翻页图标
     */
    prevIcon: {
      type: String,
      default: "$prev"
    },
    /**
     * @zh 单箭头往后翻页图标
     */
    nextIcon: {
      type: String,
      default: "$next"
    },
    /**
     * @zh 双箭头往后翻页图标
     */
    nextDoubleIcon: {
      type: String,
      default: "$nextDouble"
    }
  },
  emits: {
    "update:modelValue": (_modelValue) => true
  },
  setup(props, {
    slots
  }) {
    const firstDayOfWeek = computed(() => Number(props.firstDayOfWeek));
    const max = computed(() => props.max ? createDate(props.max) : void 0);
    const min = computed(() => props.min ? createDate(props.min) : void 0);
    const model = useProxiedModel(props, "modelValue", props.modelValue, (v) => createDate(v), (v) => formatter(v));
    const range = inject(DateRangeKey, null);
    const selected = computed(() => {
      if (range) {
        return range.selected.value.map((v) => valueFormatter(v.startOf("day")));
      }
      return wrapInArray(valueFormatter(model.value.startOf("day")));
    });
    const weekdays = computed(() => createRange(7).map((i) => WEEKDAYS[(i + firstDayOfWeek.value) % 7]));
    const internalModel = ref(model.value.startOf("month"));
    const month = computed(() => internalModel.value.format("M"));
    watch(model, (val) => {
      internalModel.value = val.startOf("month");
    });
    function formatter(date) {
      return typeof props.format === "string" ? date.format(props.format) : props.format(date);
    }
    function valueFormatter(date) {
      return createDate(formatter(date)).valueOf();
    }
    const rows = computed(() => {
      const now = valueFormatter(createDate().startOf("day"));
      const sharedProps = {
        icon: true,
        variant: "text",
        shape: "circle",
        size: "small"
      };
      const cells = [];
      const weekDay = Number(internalModel.value.format("d"));
      const offsetDay = firstDayOfWeek.value - weekDay;
      let date = internalModel.value.add(offsetDay, "day");
      createRange(CELLS_COUNT).forEach((_) => {
        const current = date;
        date = date.add(1, "day");
        const text = formatter(current);
        const value = valueFormatter(current);
        const selectedIndex = selected.value.findIndex((v) => v === value);
        const isActive = selectedIndex > -1;
        const isToday = now == value;
        const variant = isActive ? "contained" : isToday ? "outlined" : "text";
        const color = isActive || isToday ? props.activeColor : void 0;
        function onClick() {
          if (range) {
            range.select(text);
            range.isPreview.value && range.preview(false);
          } else {
            model.value = current;
          }
        }
        cells.push({
          isActive,
          selectedIndex,
          isOtherMonth: current.format("M") !== month.value,
          text,
          value,
          props: {
            ...sharedProps,
            variant,
            color,
            text: current.format("D"),
            onClick
          }
        });
      });
      const rows2 = createRange(ROWS_COUNT).map((_, index) => {
        return cells.slice(index * COLS_COUNT, (index + 1) * COLS_COUNT);
      });
      rows2.unshift(weekdays.value.map((text) => ({
        props: {
          ...sharedProps,
          text,
          disabled: true
        }
      })));
      return rows2;
    });
    const controls = computed(() => {
      const sharedProps = {
        variant: "text",
        shape: "circle",
        size: "small"
      };
      const hasPrev = min.value ? internalModel.value.valueOf() > min.value.valueOf() : true;
      const hasNext = max.value ? internalModel.value.valueOf() < max.value.valueOf() : true;
      return {
        prevDouble: {
          ...sharedProps,
          icon: props.prevDoubleIcon,
          onClick: prevYear,
          disabled: !hasPrev
        },
        prev: {
          ...sharedProps,
          icon: props.prevIcon,
          onClick: prevMonth,
          disabled: !hasPrev
        },
        date: {
          ...sharedProps,
          shape: "rounded-sm",
          style: {
            fontSize: "14px"
          },
          text: internalModel.value.format("YYYY-MM")
        },
        next: {
          ...sharedProps,
          icon: props.nextIcon,
          onClick: nextMonth,
          disabled: !hasNext
        },
        nextDouble: {
          ...sharedProps,
          icon: props.nextDoubleIcon,
          onClick: nextYear,
          disabled: !hasNext
        }
      };
    });
    function prevYear() {
      internalModel.value = internalModel.value.subtract(1, "year");
    }
    function nextYear() {
      internalModel.value = internalModel.value.add(1, "year");
    }
    function prevMonth() {
      internalModel.value = internalModel.value.subtract(1, "month");
    }
    function nextMonth() {
      internalModel.value = internalModel.value.add(1, "month");
    }
    function onMousemove(text) {
      if (!range)
        return;
      if (range.selected.value.length === 1) {
        !range.isPreview.value && range.preview(true);
      }
      if (range.isPreview.value) {
        range.select(text);
      }
    }
    return () => {
      return _createVNode(Card, {
        "class": "ve-date-picker-panel",
        "divided": true,
        "onMousedown": (e) => e.preventDefault()
      }, {
        ...slots,
        header: () => _createVNode(_Fragment, null, [_createVNode(Button, controls.value.prevDouble, null), _createVNode(Button, controls.value.prev, null), _createVNode("div", {
          "class": "ve-date-picker-panel__date"
        }, [_createVNode(Button, controls.value.date, null)]), _createVNode(Button, controls.value.next, null), _createVNode(Button, controls.value.nextDouble, null)]),
        text: () => _createVNode(_Fragment, null, [rows.value.map((cols) => _createVNode("div", {
          "class": "ve-date-picker-panel__row"
        }, [cols.map((col) => _createVNode("div", {
          "key": col.value,
          "class": ["ve-date-picker-panel__cell", {
            "ve-date-picker-panel__cell--active": col.isActive,
            "ve-date-picker-panel__cell--other-month": col.isOtherMonth,
            "ve-date-picker-panel__cell--range-in": col.value && range?.inRange(col.value),
            "ve-date-picker-panel__cell--range-start": col.selectedIndex === 0,
            "ve-date-picker-panel__cell--range-end": col.selectedIndex === 1
          }],
          "onMousemove": () => onMousemove(col.text)
        }, [_createVNode(Button, col.props, null)]))]))])
      });
    };
  }
});
export {
  DatePickerPanel
};
//# sourceMappingURL=date-picker-panel.mjs.map
