import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { mock } from "../../mock.js";
import EventResourceUsability from "../resourceUsability/index.js";
import React, { useEffect, useState } from "react";
import { isMobile } from "@pisell/utils";
import { Iconfont, PisellCard, PisellCustomCheckboxGroup } from "@pisell/materials";
import classNames from "classnames";
import "./index.less";
//#region src/components/eventBooking/components/timeResourceSelector/index.tsx
const TimeResourceSelector = ({ timeSlots = mock.time_resource || [], showUnavailable = true, defaultExpanded = true, defaultSelectFirst = true, onChange, className, style }) => {
	const [selectedValues, setSelectedValues] = useState([]);
	const [error, setError] = useState("");
	const [expanded, setExpanded] = useState(defaultExpanded);
	useEffect(() => {
		setExpanded(defaultExpanded);
	}, [defaultExpanded]);
	const filteredTimeSlots = timeSlots === null || timeSlots === void 0 ? void 0 : timeSlots.filter((slot) => showUnavailable ? true : !slot.disabled);
	useEffect(() => {
		let id = [];
		if (defaultSelectFirst) {
			const firstAvailable = filteredTimeSlots.find((slot) => !slot.disabled);
			if (firstAvailable) id = [firstAvailable.id];
		} else id = [];
		setSelectedValues(id);
		onChange === null || onChange === void 0 || onChange(id);
	}, [defaultSelectFirst]);
	/**
	* @title: 点击卡片
	* @description:
	* @param {string} value
	* @return {*}
	* @Author: WangHan
	* @Date: 2025-01-11 16:27
	*/
	const handleChange = (value) => {
		const newValue = Array.isArray(value) ? value : [value];
		setSelectedValues(newValue);
		onChange === null || onChange === void 0 || onChange(newValue);
	};
	/**
	* @title: 渲染时间卡片
	* @description:
	* @param {TimeSlot} item
	* @return {*}
	* @Author: WangHan
	* @Date: 2025-01-10 18:08
	*/
	const renderTimeCard = (item) => {
		const obj = _objectSpread2(_objectSpread2({}, item), {}, { selected: selectedValues.includes(item === null || item === void 0 ? void 0 : item.id) });
		return /* @__PURE__ */ React.createElement(EventResourceUsability, {
			showRemaining: true,
			showTime: true,
			item: obj,
			onTimeSlotClick: (e) => handleChange(e),
			style: { width: "100%" }
		});
	};
	useEffect(() => {
		setError((selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) === 0 ? "Please select a session time" : "");
	}, [selectedValues]);
	/**
	* @title: 展开/收起
	* @description:
	* @return {*}
	* @Author: WangHan
	* @Date: 2025-01-10 19:00
	*/
	const toggleExpand = () => {
		setExpanded(!expanded);
	};
	/**
	* @title: 渲染内容
	* @description:
	* @return {*}
	* @Author: WangHan
	* @Date: 2025-01-10 18:17
	*/
	const renderContent = () => {
		if ((filteredTimeSlots === null || filteredTimeSlots === void 0 ? void 0 : filteredTimeSlots.length) === 0) return /* @__PURE__ */ React.createElement("div", { className: "time-resource-no-data" }, "No dates are available");
		return /* @__PURE__ */ React.createElement(React.Fragment, null, error && /* @__PURE__ */ React.createElement("div", { className: "time-resource-error" }, error), /* @__PURE__ */ React.createElement(PisellCustomCheckboxGroup, {
			dataSource: filteredTimeSlots,
			renderItem: renderTimeCard,
			columns: isMobile() ? 2 : 4,
			horizontalGap: 8,
			verticalGap: 8,
			allowAdd: false
		}));
	};
	return /* @__PURE__ */ React.createElement(PisellCard, {
		className: classNames("time-resource-selector", className),
		style
	}, /* @__PURE__ */ React.createElement("div", {
		className: classNames("time-resource-header", { "time-resource-header-expanded": expanded }),
		onClick: toggleExpand
	}, /* @__PURE__ */ React.createElement("div", { className: "time-resource-title" }, "选择时间段"), /* @__PURE__ */ React.createElement("div", { className: "time-resource-icon" }, expanded ? /* @__PURE__ */ React.createElement(Iconfont, { type: "pisell2-chevron-up" }) : /* @__PURE__ */ React.createElement(Iconfont, { type: "pisell2-chevron-down" }))), /* @__PURE__ */ React.createElement("div", { className: classNames("time-resource-content", { "time-resource-content-expanded": expanded }) }, renderContent()));
};
//#endregion
export { TimeResourceSelector as default };
