import { defineComponent, ref, onMounted, onUnmounted, watch, watchEffect, computed, openBlock, createElementBlock, createVNode, unref, createElementVNode, toDisplayString, Fragment, renderList, normalizeClass, createTextVNode, createCommentVNode } from "vue";
import Input from "../Input/index.mjs";
const _hoisted_1 = {
  key: 0,
  class: "picker"
};
const _hoisted_2 = { class: "picker-header" };
const _hoisted_3 = { class: "current-time" };
const _hoisted_4 = { class: "picker-weekdays" };
const _hoisted_5 = { class: "picker-body" };
const _hoisted_6 = ["onClick"];
const _hoisted_7 = {
  key: 0,
  class: "today-dot"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "DatepickerPC",
  props: {
    modelValue: {}
  },
  emits: ["input"],
  setup(__props, { emit: __emit }) {
    var _a, _b;
    const props = __props;
    const emit = __emit;
    const showPicker = ref(false);
    const selectedDate = ref(props.modelValue || /* @__PURE__ */ new Date());
    const currentYear = ref((_a = selectedDate.value) == null ? void 0 : _a.getFullYear());
    const currentMonth = ref(((_b = selectedDate.value) == null ? void 0 : _b.getMonth()) + 1);
    const pickerRef = ref(null);
    const closeOnOutsideClick = (event) => {
      if (!pickerRef.value.contains(event.target)) {
        showPicker.value = false;
      }
    };
    const togglePicker = () => {
      showPicker.value = !showPicker.value;
    };
    onMounted(() => {
      window.addEventListener("click", closeOnOutsideClick);
    });
    onUnmounted(() => {
      window.removeEventListener("click", closeOnOutsideClick);
    });
    watch(
      selectedDate,
      (newValue) => {
        emit("input", newValue);
      },
      { immediate: true }
    );
    watch(
      () => props.modelValue,
      (newValue) => {
        if (!newValue) return;
        selectedDate.value = newValue;
        currentMonth.value = selectedDate.value.getMonth() + 1;
        currentYear.value = selectedDate.value.getFullYear();
      },
      { immediate: true }
    );
    const changeMonth = (value) => {
      currentMonth.value += value;
      if (currentMonth.value === 0) {
        currentMonth.value = 12;
        currentYear.value -= 1;
      } else if (currentMonth.value === 13) {
        currentMonth.value = 1;
        currentYear.value += 1;
      }
    };
    const selectDate = (date) => {
      if (isPast(date)) {
        return;
      }
      selectedDate.value = date;
      showPicker.value = false;
    };
    const days = ref([]);
    const updateDays = () => {
      const daysArray = [];
      const firstDay = new Date(
        currentYear.value,
        currentMonth.value - 1,
        1
      ).getDay();
      const daysInMonth = new Date(
        currentYear.value,
        currentMonth.value,
        0
      ).getDate();
      const daysInPrevMonth = new Date(
        currentYear.value,
        currentMonth.value - 1,
        0
      ).getDate();
      for (let i = daysInPrevMonth - firstDay + 1; i <= daysInPrevMonth; i++) {
        const date = new Date(currentYear.value, currentMonth.value - 2, i);
        daysArray.push({
          id: date.toISOString(),
          label: i,
          date,
          otherMonth: true
        });
      }
      for (let i = 1; i <= daysInMonth; i++) {
        const date = new Date(currentYear.value, currentMonth.value - 1, i);
        daysArray.push({
          id: date.toISOString(),
          label: i,
          date,
          otherMonth: false
        });
      }
      const remainingDays = 35 - daysArray.length;
      if (remainingDays > 0) {
        for (let i = 1; i <= remainingDays; i++) {
          const date = new Date(currentYear.value, currentMonth.value, i);
          daysArray.push({
            id: date.toISOString(),
            label: i,
            date,
            otherMonth: true
          });
        }
      }
      days.value = daysArray.slice(0, 35);
    };
    watchEffect(() => {
      updateDays();
    });
    const formattedDate = computed(
      () => `${selectedDate.value.getFullYear()}-${selectedDate.value.getMonth() + 1}-${selectedDate.value.getDate()}`
    );
    const isSelected = (date) => date.toISOString() === selectedDate.value.toISOString();
    const isToday = (date) => {
      const today = /* @__PURE__ */ new Date();
      return date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate();
    };
    const isPast = (date) => {
      const today = /* @__PURE__ */ new Date();
      today.setHours(0, 0, 0, 0);
      return date < today;
    };
    const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "pickerRef",
        ref: pickerRef,
        class: "container"
      }, [
        createVNode(unref(Input), {
          "model-value": formattedDate.value,
          onInput: _cache[0] || (_cache[0] = ($event) => formattedDate.value = $event),
          readonly: "",
          class: "datepicker-input",
          onFocus: togglePicker
        }, null, 8, ["model-value"]),
        showPicker.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
          createElementVNode("div", _hoisted_2, [
            createElementVNode("span", _hoisted_3, toDisplayString(currentYear.value) + "/" + toDisplayString(currentMonth.value < 10 ? `0${currentMonth.value}` : currentMonth.value), 1),
            createElementVNode("button", {
              class: "arrow",
              onClick: _cache[1] || (_cache[1] = ($event) => changeMonth(-1))
            }, "<"),
            createElementVNode("button", {
              class: "arrow",
              onClick: _cache[2] || (_cache[2] = ($event) => changeMonth(1))
            }, ">")
          ]),
          createElementVNode("div", _hoisted_4, [
            (openBlock(), createElementBlock(Fragment, null, renderList(weekdays, (weekday) => {
              return createElementVNode("div", {
                key: weekday,
                class: "weekday"
              }, toDisplayString(weekday), 1);
            }), 64))
          ]),
          createElementVNode("div", _hoisted_5, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(days.value, (day) => {
              return openBlock(), createElementBlock("div", {
                key: day.id,
                class: normalizeClass(["day", {
                  "other-month": day.otherMonth,
                  selected: isSelected(day.date),
                  today: isToday(day.date),
                  past: isPast(day.date)
                }]),
                onClick: ($event) => selectDate(day.date)
              }, [
                createTextVNode(toDisplayString(day.label) + " ", 1),
                isToday(day.date) ? (openBlock(), createElementBlock("span", _hoisted_7)) : createCommentVNode("", true)
              ], 10, _hoisted_6);
            }), 128))
          ])
        ])) : createCommentVNode("", true)
      ], 512);
    };
  }
});
export {
  _sfc_main as default
};
