import dayjs from "dayjs";
import React, { useEffect, useState } from "react";
import { isMobile, locales } from "@pisell/utils";
import { Iconfont, PisellEmpty } from "@pisell/materials";
import "./index.less";
//#region src/components/eventBooking/components/scheduleCalendar/components/ScheduleTimeItem/index.tsx
const ScheduleTimeItem = ({ timeList }) => {
	const [times, setTimes] = useState([]);
	const [isExpand, setIsExpand] = useState(false);
	useEffect(() => {
		if ((timeList === null || timeList === void 0 ? void 0 : timeList.length) > 4) setTimes(timeList === null || timeList === void 0 ? void 0 : timeList.slice(0, 4));
		else setTimes(timeList);
	}, [timeList]);
	const handleExpand = () => {
		const nextExpandStatus = !isExpand;
		if (nextExpandStatus) setTimes(timeList);
		else setTimes(timeList === null || timeList === void 0 ? void 0 : timeList.slice(0, 4));
		setIsExpand(nextExpandStatus);
	};
	return /* @__PURE__ */ React.createElement("div", { className: "schedule-time-item" }, /* @__PURE__ */ React.createElement("div", { className: "schedule-time-item-content-wrapper" }, (times === null || times === void 0 ? void 0 : times.length) > 0 ? times === null || times === void 0 ? void 0 : times.map((item) => /* @__PURE__ */ React.createElement("div", {
		className: isMobile() ? "schedule-time-item-content-mobile" : "schedule-time-item-content",
		key: (item.start_at || "") + (item.end_at || "")
	}, /* @__PURE__ */ React.createElement("div", { className: "schedule-time-item-content-time" }, (item === null || item === void 0 ? void 0 : item.start_date) || ""), /* @__PURE__ */ React.createElement("div", { className: "schedule-time-item-content-time" }, dayjs((item === null || item === void 0 ? void 0 : item.start_at) || "").format("HH:mm"), " - ", dayjs((item === null || item === void 0 ? void 0 : item.end_at) || "").format("HH:mm")))) : /* @__PURE__ */ React.createElement(PisellEmpty, null)), (timeList === null || timeList === void 0 ? void 0 : timeList.length) > 4 && /* @__PURE__ */ React.createElement("div", {
		className: "schedule-time-item-expand-btn",
		onClick: handleExpand
	}, isExpand ? locales.getText("pisell2.event.schedule.item.collapse") : locales.getText("pisell2.event.schedule.item.expand"), /* @__PURE__ */ React.createElement(Iconfont, {
		type: isExpand ? "pisell2-chevron-up-double" : "pisell2-chevron-down-double",
		className: "schedule-time-item-expand-btn-icon"
	})));
};
//#endregion
export { ScheduleTimeItem as default };
