import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import useEngineContext from "../../../hooks/useEngineContext.js";
import Forms from "../../../components/booking/forms/forms.js";
import { getRelationRecords } from "../serve.js";
import React, { useCallback, useMemo, useState } from "react";
import { Spin, Tooltip } from "antd";
import { locales } from "@pisell/utils";
import { PisellModal } from "@pisell/materials";
import { useRequest } from "ahooks";
//#region src/plus/pisellSalesManagement/components/BookingFormsPreview.tsx
const BookingFormsPreview = (props) => {
	var _context$appHelper;
	const context = useEngineContext();
	const utils = (context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils) || {};
	const { value, uniqueTables, bookingLabels, textStyles, relationId, relationType, customer } = props;
	const appointmentForms = Array.isArray(value) ? value : [];
	const [modalOpen, setModalOpen] = useState(false);
	const [activeTable, setActiveTable] = useState(null);
	const _getRelationRecords = useRequest(getRelationRecords, { manual: true });
	const [hasRequested, setHasRequested] = useState(false);
	const [tooltipOpen, setTooltipOpen] = useState(false);
	const countsByFormId = useMemo(() => {
		return appointmentForms.reduce((result, item) => {
			const formId = item === null || item === void 0 ? void 0 : item.form_id;
			if (formId != null) {
				const key = String(formId);
				result[key] = (result[key] || 0) + 1;
			}
			return result;
		}, {});
	}, [appointmentForms]);
	const tableItems = useMemo(() => {
		return (uniqueTables || []).map((t) => {
			var _t$form, _t$form2;
			const baseTitle = (t === null || t === void 0 || (_t$form = t.form) === null || _t$form === void 0 || (_t$form = _t$form.setting) === null || _t$form === void 0 || (_t$form = _t$form.title) === null || _t$form === void 0 ? void 0 : _t$form.original) || (t === null || t === void 0 || (_t$form2 = t.form) === null || _t$form2 === void 0 ? void 0 : _t$form2.title) || "";
			if (!baseTitle) return null;
			const formId = t === null || t === void 0 ? void 0 : t.form_id;
			const count = formId != null ? countsByFormId[String(formId)] || 0 : 0;
			return {
				title: `${baseTitle} (${count})`,
				baseTitle,
				formId,
				count,
				table: t
			};
		}).filter((t) => t);
	}, [uniqueTables, countsByFormId]);
	const showAll = tableItems.length <= 3;
	const displayItems = showAll ? tableItems : tableItems.slice(0, 3);
	const moreCount = tableItems.length - displayItems.length;
	const handleOpenModal = useCallback((item, event) => {
		event.stopPropagation();
		setActiveTable(item);
		setModalOpen(true);
		setTooltipOpen(false);
		if (!_getRelationRecords.loading && !hasRequested) {
			setHasRequested(true);
			_getRelationRecords.run({
				relation_type: relationType || "appointment_booking",
				relation_id: relationId
			});
		}
	}, [
		_getRelationRecords,
		relationId,
		hasRequested,
		relationType
	]);
	const relationRecords = useMemo(() => {
		return Array.isArray(_getRelationRecords.data) ? _getRelationRecords.data : [];
	}, [_getRelationRecords.data]);
	const selectedForm = useMemo(() => {
		if (!(activeTable === null || activeTable === void 0 ? void 0 : activeTable.formId)) return null;
		return relationRecords.find((item) => String(item === null || item === void 0 ? void 0 : item.form_id) === String(activeTable === null || activeTable === void 0 ? void 0 : activeTable.formId));
	}, [activeTable, relationRecords]);
	if (tableItems.length === 0) return /* @__PURE__ */ React.createElement("div", { style: {
		minWidth: 0,
		maxWidth: "100%",
		textAlign: "center"
	} }, "-");
	const tooltipContent = /* @__PURE__ */ React.createElement("div", { style: {
		display: "flex",
		flexDirection: "column",
		gap: 10
	} }, tableItems.map((item, idx) => {
		const clickable = item.count > 0;
		return /* @__PURE__ */ React.createElement("div", {
			key: `${item.title}-${idx}`,
			style: {
				fontSize: 12,
				color: clickable ? "#7f56d9" : "#98A2B3",
				textDecoration: clickable ? "underline" : "none",
				whiteSpace: "nowrap",
				lineHeight: "18px",
				cursor: clickable ? "pointer" : "default"
			},
			onClick: (event) => {
				if (!clickable) return;
				handleOpenModal(item, event);
			}
		}, item.title);
	}));
	return /* @__PURE__ */ React.createElement("div", {
		onClick: (event) => event.stopPropagation(),
		style: {
			minWidth: 0,
			maxWidth: "100%",
			overflow: "hidden",
			boxSizing: "border-box"
		}
	}, showAll ? /* @__PURE__ */ React.createElement("div", { style: {
		display: "flex",
		flexDirection: "column"
	} }, displayItems.map((item, idx) => /* @__PURE__ */ React.createElement("div", {
		key: `${item.title}-${idx}`,
		style: _objectSpread2(_objectSpread2({}, (textStyles === null || textStyles === void 0 ? void 0 : textStyles.text) || {}), {}, {
			color: "#7f56d9",
			textDecoration: "underline",
			cursor: "pointer",
			textAlign: "left",
			overflow: "hidden",
			textOverflow: "ellipsis",
			whiteSpace: "nowrap"
		}),
		onClick: (event) => handleOpenModal(item, event)
	}, item.title))) : /* @__PURE__ */ React.createElement("div", { style: {
		display: "flex",
		flexDirection: "column"
	} }, displayItems.map((item, idx) => /* @__PURE__ */ React.createElement("div", {
		key: `${item.title}-${idx}`,
		style: _objectSpread2(_objectSpread2({}, (textStyles === null || textStyles === void 0 ? void 0 : textStyles.text) || {}), {}, {
			color: "#475467",
			textDecoration: "none",
			cursor: "default",
			textAlign: "left",
			overflow: "hidden",
			textOverflow: "ellipsis",
			whiteSpace: "nowrap"
		})
	}, item.title)), moreCount > 0 ? /* @__PURE__ */ React.createElement(Tooltip, {
		title: tooltipContent,
		open: modalOpen ? false : tooltipOpen,
		onOpenChange: (nextOpen) => {
			if (!modalOpen) setTooltipOpen(nextOpen);
		}
	}, /* @__PURE__ */ React.createElement("div", { style: _objectSpread2(_objectSpread2({}, (textStyles === null || textStyles === void 0 ? void 0 : textStyles.text) || {}), {}, {
		color: "#7f56d9",
		textDecoration: "underline",
		cursor: "default",
		alignSelf: "flex-start"
	}) }, `+${moreCount} ${locales.getText("pisell2.salesManagement.booking.common.more")}`)) : null), /* @__PURE__ */ React.createElement(PisellModal, {
		open: modalOpen,
		title: bookingLabels === null || bookingLabels === void 0 ? void 0 : bookingLabels.forms,
		width: 600,
		footer: null,
		destroyOnClose: true,
		onCancel: () => setModalOpen(false)
	}, _getRelationRecords.loading || !hasRequested ? /* @__PURE__ */ React.createElement("div", { style: {
		display: "flex",
		justifyContent: "center",
		alignItems: "center",
		padding: "48px 0"
	} }, /* @__PURE__ */ React.createElement(Spin, null)) : selectedForm ? /* @__PURE__ */ React.createElement(Forms, {
		forms: [selectedForm],
		value: { [selectedForm.form_id]: selectedForm.form_record || [] },
		onChange: () => {},
		addCallback: () => {},
		client: customer,
		action: utils.action
	}) : null));
};
//#endregion
export { BookingFormsPreview as default };
