const require_runtime = require("../../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_asyncToGenerator = require("../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js");
const require_utils = require("../../../utils.js");
const require_utils$1 = require("../../utils.js");
const require_index = require("../../../components/drawer/index.js");
const require_utils$2 = require("../utils.js");
const require_format = require("../../../forms/format.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
let _pisell_utils = require("@pisell/utils");
let _pisell_icon_es_PlusCircle = require("@pisell/icon/es/PlusCircle");
_pisell_icon_es_PlusCircle = require_runtime.__toESM(_pisell_icon_es_PlusCircle);
let _pisell_icon_es_User01 = require("@pisell/icon/es/User01");
_pisell_icon_es_User01 = require_runtime.__toESM(_pisell_icon_es_User01);
let _pisell_icon_es_SearchLg = require("@pisell/icon/es/SearchLg");
_pisell_icon_es_SearchLg = require_runtime.__toESM(_pisell_icon_es_SearchLg);
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let _pisell_icon_es_Plus = require("@pisell/icon/es/Plus");
_pisell_icon_es_Plus = require_runtime.__toESM(_pisell_icon_es_Plus);
require("./SelectDrawer.less");
//#region src/components/booking/info/clientVariant/vertical/SelectDrawer.tsx
const ActionItem = (props) => {
	return /* @__PURE__ */ react.default.createElement("div", {
		className: "vertical-client-select-drawer-item-wrap",
		onClick: props.onClick
	}, /* @__PURE__ */ react.default.createElement("span", { className: "vertical-client-item-icon-wrap" }, /* @__PURE__ */ react.default.createElement(_pisell_icon_es_Plus.default, { style: {
		fontSize: 28,
		color: "#7F56D9"
	} })), /* @__PURE__ */ react.default.createElement("span", { className: "vertical-client-item-title" }, props.title));
};
const Item = ({ cover, onClick, title, desc, coverSize, checked, style, loading, waiverForm }) => {
	const waiverTitle = (0, react.useMemo)(() => {
		return require_utils$2.getWaiverTitle(waiverForm);
	}, [waiverForm]);
	return /* @__PURE__ */ react.default.createElement("div", {
		className: (0, classnames.default)("vertical-client-select-drawer-item-wrap", { ["checked"]: checked }),
		onClick,
		style
	}, /* @__PURE__ */ react.default.createElement(antd.Avatar, {
		className: "pisell-lowcode__booking-client-list-item-avatar",
		src: _pisell_utils.image.ali(cover, 100) || void 0,
		size: coverSize || 56,
		icon: /* @__PURE__ */ react.default.createElement(_pisell_icon_es_User01.default, { className: "pisell-lowcode__booking-client-list-item-avatar-icon" })
	}), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode__booking-client-list-item-info" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode__booking-client-list-item-info-name" }, title), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode__booking-client-list-item-info-desc" }, (desc || []).map((d) => /* @__PURE__ */ react.default.createElement("div", {
		className: "",
		title: d
	}, d))), /* @__PURE__ */ react.default.createElement("div", {
		className: "pisell-lowcode__booking-client-list-item-info-desc-waiver",
		title: waiverTitle
	}, (waiverForm || []).map((item) => {
		return /* @__PURE__ */ react.default.createElement("span", null, item.form_title, ":", item.is_filled ? /* @__PURE__ */ react.default.createElement("span", { className: "pisell-lowcode__booking-client-list-item-info-desc-filled" }, _pisell_utils.locales.getText("pisell2.text.filled")) : /* @__PURE__ */ react.default.createElement("span", { className: "pisell-lowcode__booking-client-list-item-info-desc-not-filled" }, _pisell_utils.locales.getText("pisell2.text.not-filled")), "; ");
	}))), /* @__PURE__ */ react.default.createElement(antd.Spin, { spinning: !!loading }));
};
const defaultArr = [];
const SelectDrawer = (props, ref) => {
	const { autoFocus, onClose, handleSelectClient, handleCreateItem, childrenValue, handleSelectPet, formData, searchChange, options, loading, holder, client, loadMore, showPet, handleAddPet, modalOpen, franchiseeLoading, showHeader, showWalkIn } = props;
	const form = (formData === null || formData === void 0 ? void 0 : formData[0]) || {};
	const valList = (childrenValue === null || childrenValue === void 0 ? void 0 : childrenValue[form.id]) || defaultArr;
	const [_value, setValue] = (0, react.useState)(valList);
	const clientRef = (0, react.useRef)();
	const searchRef = (0, react.useRef)();
	const [open, setOpen] = (0, react.useState)(false);
	const [search, setSearch] = (0, react.useState)("");
	(0, react.useEffect)(() => {
		setValue(valList.map((item) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, item), {}, { id: item.id || item.form_record_id })));
	}, [valList, open]);
	(0, react.useEffect)(() => {
		if (!modalOpen) setOpen(false);
	}, [modalOpen]);
	const closeDrawer = () => {
		setOpen(false);
		setSearch("");
		onClose === null || onClose === void 0 || onClose();
	};
	const handleOpenModal = () => {
		setOpen(true);
		if (autoFocus) setTimeout(() => {
			var _searchRef$current, _searchRef$current$fo;
			(_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 || (_searchRef$current$fo = _searchRef$current.focus) === null || _searchRef$current$fo === void 0 || _searchRef$current$fo.call(_searchRef$current);
		}, 400);
	};
	(0, react.useImperativeHandle)(ref, () => {
		return {
			open: handleOpenModal,
			close: () => {
				setOpen(false);
			},
			setSearch: (val) => {
				setSearch(val);
			}
		};
	});
	(0, react.useEffect)(() => {
		if (!open) clientRef.current = null;
	}, [open]);
	const getNickname = (0, react.useCallback)((item) => {
		if (require_utils.isWalkIn(item === null || item === void 0 ? void 0 : item.id)) return _pisell_utils.locales.getText("pisell2.text.select-a-customer");
		const firstLastName = item.first_name || item.last_name ? `${item.first_name} ${item.last_name}` : "";
		return item.name || (item.display_name || "").trim() || (item.nickname || "").trim() || firstLastName.trim() || "";
	}, [_pisell_utils.locales.localeMap]);
	const handleAddClient = () => {
		handleCreateItem(() => {
			setSearch("");
		});
	};
	const handleChildrenValueChange = function() {
		var _ref = require_asyncToGenerator._asyncToGenerator(function* (value, item) {
			let clientId = client.id;
			if (!(client === null || client === void 0 ? void 0 : client.id) || client.id === 1) {
				var _clientRef$current;
				clientId = ((_clientRef$current = clientRef.current) === null || _clientRef$current === void 0 ? void 0 : _clientRef$current.id) || item.id;
			}
			if (mode === "single") {
				if (!(client === null || client === void 0 ? void 0 : client.id) || client.id === 1) yield handleSelectClient([item]);
				handleSelectPet({ [form.id]: require_format.formatAddFormValues({
					clientId,
					value: [value],
					data_range: holder.data_range
				}) });
				setTimeout(() => {
					closeDrawer();
				});
			} else {
				const index = _value.findIndex((item) => item.id === value.id || item.form_record_id === value.id);
				if (!clientRef.current) clientRef.current = item;
				if (index >= 0) {
					const newList = [..._value];
					newList.splice(index, 1);
					setValue(require_format.formatAddFormValues({
						clientId,
						value: newList,
						data_range: holder.data_range
					}));
				} else setValue(require_format.formatAddFormValues({
					clientId,
					value: [..._value, value],
					data_range: holder.data_range
				}));
			}
		});
		return function handleChildrenValueChange(_x, _x2) {
			return _ref.apply(this, arguments);
		};
	}();
	const mode = (0, react.useMemo)(() => {
		if (["form"].includes(holder === null || holder === void 0 ? void 0 : holder.type)) return "single";
		if (["table"].includes(holder === null || holder === void 0 ? void 0 : holder.type)) return "multiple";
		return holder === null || holder === void 0 ? void 0 : holder.type;
	}, [holder === null || holder === void 0 ? void 0 : holder.type]);
	const handleOk = function() {
		var _ref2 = require_asyncToGenerator._asyncToGenerator(function* () {
			var _holder$form;
			if (!(client === null || client === void 0 ? void 0 : client.id) || (client === null || client === void 0 ? void 0 : client.id) === 1) yield handleSelectClient([clientRef.current]);
			handleSelectPet({ [holder === null || holder === void 0 || (_holder$form = holder.form) === null || _holder$form === void 0 ? void 0 : _holder$form.id]: _value });
			closeDrawer();
		});
		return function handleOk() {
			return _ref2.apply(this, arguments);
		};
	}();
	const handleClientClick = function() {
		var _ref3 = require_asyncToGenerator._asyncToGenerator(function* (item) {
			yield handleSelectClient([item]);
			if (mode === "multiple") {
				var _item$form_record;
				const isHasChildren = _value.some((val) => item.form_record.some((f) => f.id || f.form_record_id === val.id || val.form_record_id));
				handleSelectPet({ [form.id]: require_utils$1.uniqueByField([...require_format.sortFormValues(_value, item.id), ...isHasChildren ? [] : require_format.formatAddFormValues({
					clientId: item.id,
					data_range: holder.data_range,
					value: (_item$form_record = item.form_record) === null || _item$form_record === void 0 ? void 0 : _item$form_record.map((f) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, f), {}, { customer: item }))
				})], "id") });
			}
			closeDrawer();
		});
		return function handleClientClick(_x3) {
			return _ref3.apply(this, arguments);
		};
	}();
	console.log("options7777", options);
	return /* @__PURE__ */ react.default.createElement(require_index.default, {
		showGoBack: showHeader,
		title: showHeader && _pisell_utils.locales.getText("pisell2.text.select-customer"),
		open,
		onClose: closeDrawer,
		header: /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement(antd.Input, {
			ref: searchRef,
			prefix: /* @__PURE__ */ react.default.createElement(_pisell_icon_es_SearchLg.default, null),
			style: {
				margin: "16px 0",
				height: 44
			},
			placeholder: _pisell_utils.locales.getText("pisell2.booking.text.search-placeholder"),
			value: search,
			allowClear: true,
			onChange: (e) => {
				setSearch(e.target.value);
				if (searchChange) searchChange(e.target.value);
			}
		})),
		width: 300,
		titleNoWrap: true,
		getContainer: false,
		destroyOnClose: true,
		push: { distance: 180 },
		footer: mode === "multiple" && /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement(antd.Button, {
			block: true,
			type: "primary",
			onClick: handleOk,
			loading: !!franchiseeLoading
		}, _pisell_utils.locales.getText("pisell2.text.apply")))
	}, /* @__PURE__ */ react.default.createElement("div", { className: "vertical-client-select-drawer-content-wrap" }, /* @__PURE__ */ react.default.createElement("div", { className: "vertical-client-select-drawer-top" }, /* @__PURE__ */ react.default.createElement(ActionItem, {
		title: _pisell_utils.locales.getText("pisell2.text.create-new-customer"),
		onClick: handleAddClient
	}), showWalkIn ? /* @__PURE__ */ react.default.createElement(ActionItem, {
		title: "Walk-In",
		onClick: () => {
			handleSelectClient([]);
			closeDrawer();
		}
	}) : null), /* @__PURE__ */ react.default.createElement(antd.Spin, {
		spinning: !!loading,
		delay: 500
	}, !!options.length ? options.map((item) => {
		var _holder$form2;
		let displayEmail = item === null || item === void 0 ? void 0 : item.email;
		let displayPhone = item === null || item === void 0 ? void 0 : item.phone;
		if (!displayEmail && !displayPhone) {
			var _item$contacts_info, _item$contacts_info2;
			displayEmail = item === null || item === void 0 || (_item$contacts_info = item.contacts_info) === null || _item$contacts_info === void 0 || (_item$contacts_info = _item$contacts_info.value) === null || _item$contacts_info === void 0 ? void 0 : _item$contacts_info.email;
			displayPhone = item === null || item === void 0 || (_item$contacts_info2 = item.contacts_info) === null || _item$contacts_info2 === void 0 || (_item$contacts_info2 = _item$contacts_info2.value) === null || _item$contacts_info2 === void 0 || (_item$contacts_info2 = _item$contacts_info2.phone) === null || _item$contacts_info2 === void 0 ? void 0 : _item$contacts_info2.phone;
		}
		return /* @__PURE__ */ react.default.createElement("div", {
			className: "vertical-client-select-drawer-content-item",
			key: item.id
		}, /* @__PURE__ */ react.default.createElement(Item, {
			onClick: () => handleClientClick(item),
			cover: item.cover,
			title: getNickname(item),
			desc: [displayEmail, displayPhone],
			checked: item.id === client.id,
			style: showPet ? { marginBottom: 6 } : {},
			loading: franchiseeLoading === item.id,
			waiverForm: item.waiver_form
		}), showPet && /* @__PURE__ */ react.default.createElement("div", { className: "vertical-client-select-drawer-content-item-children" }, ((item === null || item === void 0 ? void 0 : item.form_record) || []).map((f) => {
			const checked = _value.some((item) => item.id === f.id || item.form_record_id === f.id);
			return /* @__PURE__ */ react.default.createElement("div", {
				onClick: () => {
					handleChildrenValueChange(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, f), {}, { customer: item }), item);
				},
				id: `${f.id}`,
				key: f.id,
				className: (0, classnames.default)("vertical-client-select-drawer-content-item-children-item", { ["checked"]: checked })
			}, mode === "multiple" && /* @__PURE__ */ react.default.createElement(antd.Checkbox, { checked }), /* @__PURE__ */ react.default.createElement(Item, {
				coverSize: 48,
				title: f.main_field,
				loading: false
			}));
		}), /* @__PURE__ */ react.default.createElement("div", {
			className: "pisell-lowcode__custom-select-create",
			onClick: () => {
				handleAddPet === null || handleAddPet === void 0 || handleAddPet(item);
			},
			style: { padding: 16 }
		}, /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(_pisell_icon_es_PlusCircle.default, { className: "pisell-lowcode__custom-select-create-icon" }), /* @__PURE__ */ react.default.createElement("span", { className: "pisell-lowcode__custom-select-create-txt" }, `${_pisell_utils.locales.getText("pisell2.text.create-new")} ${((_holder$form2 = holder.form) === null || _holder$form2 === void 0 ? void 0 : _holder$form2.title) || "-"}`))), /* @__PURE__ */ react.default.createElement("div", null)));
	}) : /* @__PURE__ */ react.default.createElement(antd.Empty, { image: antd.Empty.PRESENTED_IMAGE_SIMPLE }), /* @__PURE__ */ react.default.createElement("div", null, loadMore))));
};
var SelectDrawer_default = (0, react.forwardRef)(SelectDrawer);
//#endregion
exports.default = SelectDrawer_default;
