import Status from "./Status/index.js";
import { getCallToBookStatus, getStatus, statusColor, weekListText } from "./state.js";
import dayjs from "dayjs";
import { forwardRef, useImperativeHandle, useMemo, useState } from "react";
import { isMobile } from "@pisell/utils";
import { Iconfont, PisellModal } from "@pisell/materials";
import classNames from "classnames";
import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
import "./index.less";
//#region src/components/eventBooking/components/bookingAvailabilityCalendar/components/CalendarDate/index.tsx
dayjs.extend(isSameOrBefore);
const CalendarDate = (props, ref) => {
	const { cutTime, getLimitData, dateLimitData, loading } = props;
	const [productId, setProductId] = useState("");
	const [currentDate, setCurrentDate] = useState("");
	const [dateMonthList, setDateMonthList] = useState([]);
	const [currentMonth, setCurrentMonth] = useState(() => {
		return dayjs();
	});
	const [open, setOpen] = useState(false);
	const startingColumn = 0;
	const columns = Array.from({ length: 7 }, (_, index) => (index + 7 - startingColumn) % 7);
	/**
	* @title: 获取当前月日期
	* @description:
	* @param {*}
	* @return {*}
	* @Author: 严文强
	* @Date: 2024-02-01 20:30
	*/
	const getMonthData = (date) => {
		const firstDay = dayjs(`${date}-01`);
		const startDay = firstDay.day();
		const daysInMonth = firstDay.daysInMonth();
		const monthData = [];
		for (let i = 0; i < startDay; i++) monthData.push({
			day: -1,
			date: dayjs(firstDay).subtract(startDay - i, "day").toDate()
		});
		for (let i = 1; i <= daysInMonth; i++) monthData.push({
			day: i,
			date: firstDay.date(i).format("YYYY-MM-DD")
		});
		return monthData;
	};
	/**
	* @title: 计算是否已经切换到当前月，如果是则禁止继续点击上一个月
	* @description:
	* @param {*}
	* @return {*}
	* @Author: 严文强
	* @Date: 2024-02-01 19:27
	*/
	const lastMonthDisable = () => {
		return dayjs(currentMonth.format("YYYY-MM")).subtract(1, "month").isBefore(dayjs(), "month");
	};
	/**
	* @title: 切换上个月
	* @description:
	* @param {*}
	* @return {*}
	* @Author: 严文强
	* @Date: 2024-02-01 19:15
	*/
	const lastMonth = () => {
		let newLastMonth = dayjs(currentMonth.format("YYYY-MM")).subtract(1, "month");
		setCurrentMonth(newLastMonth);
		setDateMonthList(getMonthData(newLastMonth.format("YYYY-MM")));
	};
	/**
	* @title: 切换下个月
	* @description:
	* @param {*}
	* @return {*}
	* @Author: 严文强
	* @Date: 2024-02-01 19:15
	*/
	const nextMonth = () => {
		let newNextMonth = dayjs(currentMonth.format("YYYY-MM")).add(1, "month");
		setCurrentMonth(newNextMonth);
		setDateMonthList(getMonthData(newNextMonth.format("YYYY-MM")));
	};
	/**
	* @title: 根据当前选择的月份剩余量
	* @description:
	* @return {*}
	* @Author: xiangxiang.shao
	* @Date: 2024-02-07 14:13
	*/
	const CalendarDateContent = useMemo(() => {
		return /* @__PURE__ */ React.createElement("div", { className: "calendar-box" }, /* @__PURE__ */ React.createElement("div", { className: "calendar-header" }, /* @__PURE__ */ React.createElement("div", {
			className: classNames("calendar-last-month", { "last-month-disabled": lastMonthDisable() }),
			onClick: () => {
				if (lastMonthDisable()) return;
				lastMonth();
			}
		}, /* @__PURE__ */ React.createElement(Iconfont, { type: "pisell2-chevron-left" })), /* @__PURE__ */ React.createElement("div", { className: "calendar-current-month" }, currentMonth.format("MMMM YYYY")), /* @__PURE__ */ React.createElement("div", {
			className: "calendar-next-month",
			onClick: () => {
				nextMonth();
			}
		}, /* @__PURE__ */ React.createElement(Iconfont, { type: "pisell2-chevron-right" }))), /* @__PURE__ */ React.createElement("div", { className: "calendar-content" }, /* @__PURE__ */ React.createElement("div", { className: "calendar-weeks" }, columns.map((col) => /* @__PURE__ */ React.createElement("div", {
			key: col,
			className: "calendar-weeks-items"
		}, weekListText[Number(col)]))), /* @__PURE__ */ React.createElement("div", { className: "calendar-days" }, dateMonthList.map((day, index) => {
			const date = dayjs(day.date).format("YYYY-MM-DD");
			const { status, disabled } = getStatus(dateLimitData, date, cutTime);
			const currentStatus = getCallToBookStatus(date, dateLimitData, cutTime) && (status === "lots_of_space" || status === "filling_up_fast") ? "call_to_book" : status;
			return /* @__PURE__ */ React.createElement("div", {
				key: index,
				className: classNames("calendar-days-items", {
					disabledDate: disabled || loading,
					disabledSelect: status === "sold_out",
					selectDate: currentDate === date,
					"other-month-days": (day === null || day === void 0 ? void 0 : day.day) < 1
				}),
				onClick: () => {
					if (loading) return;
					props.dateChange(date);
				}
			}, (day === null || day === void 0 ? void 0 : day.day) >= 1 && /* @__PURE__ */ React.createElement("div", {
				style: { "--lineColor": !loading ? statusColor[currentStatus] : "" },
				className: classNames("day-text", { "day-line": !disabled })
			}, (day === null || day === void 0 ? void 0 : day.day) < 1 ? "" : day === null || day === void 0 ? void 0 : day.day));
		}))), /* @__PURE__ */ React.createElement(Status, { style: { margin: 0 } }));
	}, [
		currentMonth,
		dateMonthList,
		getLimitData,
		currentDate
	]);
	useImperativeHandle(ref, () => {
		return { open: (date, id) => {
			setOpen(true);
			let daysText = dayjs(date).format("YYYY-MM");
			setCurrentMonth(dayjs(date));
			setCurrentDate(date);
			setDateMonthList(getMonthData(daysText));
		} };
	});
	return /* @__PURE__ */ React.createElement(PisellModal, {
		open,
		title: "device",
		mobileModalHeight: "auto",
		platform: isMobile() ? "h5" : "pc",
		bodyStyle: { padding: isMobile() ? "16px 24px" : 32 },
		destroyOnClose: true,
		className: "select-holder-modal",
		footer: null,
		onCancel: () => setOpen(false)
	}, CalendarDateContent);
};
var CalendarDate_default = forwardRef(CalendarDate);
//#endregion
export { CalendarDate_default as default };
