import CalendarItem from "./calendarItem.js";
import { Context } from "../model.js";
import { getScheduleAvailability } from "./serve.js";
import { formatAvailability } from "./utils.js";
import dayjs from "dayjs";
import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
import { Spin } from "antd";
import { createArray } from "@pisell/utils";
import { useRequest } from "ahooks";
import "./index.less";
//#region src/components/schedules/calendar/index.tsx
const MONTH_CARD_WIDTH = 300;
const Calendar$1 = () => {
	const { state, dispatch } = useContext(Context);
	const { calendar, currentSelectDayDetail } = state;
	const { allData, editData, isEdit } = calendar || {};
	const { date: selectDate } = currentSelectDayDetail || {};
	const calenderRef = useRef(null);
	const [colCount, setColCount] = useState(4);
	const [dateRange] = useState([dayjs().format("YYYY-01"), dayjs().add(1, "year").format("YYYY-06")]);
	const [monthData, setMonthDate] = useState({});
	useEffect(() => {
		const startMonth = dayjs(dateRange[0]);
		const endMonth = dayjs(dateRange[1]);
		const months = { [dayjs(dateRange[0]).format("YYYY")]: [dateRange[0]] };
		let currentMonth = startMonth;
		while (currentMonth.isBefore(endMonth) || currentMonth.isSame(endMonth, "month")) {
			currentMonth = currentMonth.add(1, "month");
			const year = currentMonth.format("YYYY");
			if (!months[year]) months[year] = [];
			months[year].push(currentMonth.format("YYYY-MM"));
		}
		setMonthDate(months);
	}, [dateRange]);
	useEffect(() => {
		if (!calenderRef.current) return;
		const resizeObserver = new ResizeObserver(() => {
			var _calenderRef$current;
			const width = ((_calenderRef$current = calenderRef.current) === null || _calenderRef$current === void 0 ? void 0 : _calenderRef$current.clientWidth) || 0;
			const colCount = Math.floor((width - 20) / MONTH_CARD_WIDTH);
			setColCount(colCount > 4 ? 4 : colCount);
		});
		resizeObserver.observe(calenderRef.current);
		return () => {
			resizeObserver.disconnect();
		};
	}, []);
	const { loading, run, refresh } = useRequest(getScheduleAvailability, {
		manual: true,
		onSuccess: (result, params) => {
			if (result.status) dispatch({
				type: "setCalendar",
				payload: {
					sourceData: result.data,
					allData: formatAvailability(result.data)
				}
			});
		}
	});
	useEffect(() => {
		run({});
	}, []);
	const handleSelectDate = (date, item) => {
		if (isEdit) return;
		if (selectDate === date) dispatch({
			type: "setState",
			payload: { currentSelectDayDetail: null }
		});
		else dispatch({
			type: "setState",
			payload: { currentSelectDayDetail: {
				date,
				scheduleIds: item === null || item === void 0 ? void 0 : item.schedule_ids
			} }
		});
		dispatch({
			type: "setCalendar",
			payload: {
				isEdit: false,
				editData: []
			}
		});
	};
	const schedulesData = useMemo(() => {
		if (isEdit) return editData || [];
		return allData;
	}, [
		isEdit,
		allData,
		editData
	]);
	return /* @__PURE__ */ React.createElement(Spin, { spinning: loading }, /* @__PURE__ */ React.createElement("div", {
		className: "calender-box",
		ref: calenderRef
	}, Object.keys(monthData).map((year) => {
		return /* @__PURE__ */ React.createElement("div", {
			key: year,
			className: "calender-year-wrap"
		}, /* @__PURE__ */ React.createElement("div", { className: "calender-year" }, year), /* @__PURE__ */ React.createElement("div", { className: "month-list" }, monthData[year].map((month, index) => {
			return /* @__PURE__ */ React.createElement("div", {
				className: `month-item-box month-item-${colCount}`,
				key: index,
				style: {}
			}, /* @__PURE__ */ React.createElement(CalendarItem, {
				isEdit,
				month,
				schedulesData,
				selectDate,
				onSelect: handleSelectDate
			}));
		}), monthData[year].length % colCount ? createArray(colCount - monthData[year].length % colCount, (_, i) => {
			return /* @__PURE__ */ React.createElement("div", {
				key: i,
				style: { width: MONTH_CARD_WIDTH }
			});
		}) : null));
	})));
};
//#endregion
export { Calendar$1 as default };
