import PersistentBottomSheet from "../../../../pro/PersistentBottomSheet/index.js";
import { AmountDetails } from "../../components/AmountDetails/index.js";
import { CartActions } from "../../components/CartActions/index.js";
import { CartItems } from "../../components/CartItems/index.js";
import { Client } from "../../components/Client/index.js";
import { Contact } from "../../components/Contact/index.js";
import { SaleQrButton } from "../../components/SaleQrButton/index.js";
import { useSaleDetailActions } from "../../hooks/saleDetailActions/index.js";
import React, { useMemo, useState } from "react";
import { ButtonGroupPreview, Iconfont } from "@pisell/materials";
import classNames from "classnames";
import "./index.less";
//#region src/plus/saleDetail/tmpl/A/index.tsx
function SaleDetailTemplateAMain({ dataSource, moduleConfig }) {
	var _dataSource$cart3, _dataSource$cart4, _dataSource$sales$tem;
	const hiddenModules = (moduleConfig === null || moduleConfig === void 0 ? void 0 : moduleConfig.hidden) || [];
	const showCustomer = !hiddenModules.includes("customer");
	const showContact = !hiddenModules.includes("contact");
	const showCartItems = !hiddenModules.includes("cartItems");
	const showCartActions = !hiddenModules.includes("cartActions");
	const hasCartItems = useMemo(() => {
		var _dataSource$cart, _dataSource$cart2;
		return Boolean((_dataSource$cart = dataSource.cart) === null || _dataSource$cart === void 0 || (_dataSource$cart = _dataSource$cart.bookings) === null || _dataSource$cart === void 0 ? void 0 : _dataSource$cart.length) || Boolean((_dataSource$cart2 = dataSource.cart) === null || _dataSource$cart2 === void 0 || (_dataSource$cart2 = _dataSource$cart2.items) === null || _dataSource$cart2 === void 0 ? void 0 : _dataSource$cart2.length);
	}, [(_dataSource$cart3 = dataSource.cart) === null || _dataSource$cart3 === void 0 || (_dataSource$cart3 = _dataSource$cart3.bookings) === null || _dataSource$cart3 === void 0 ? void 0 : _dataSource$cart3.length, (_dataSource$cart4 = dataSource.cart) === null || _dataSource$cart4 === void 0 || (_dataSource$cart4 = _dataSource$cart4.items) === null || _dataSource$cart4 === void 0 ? void 0 : _dataSource$cart4.length]);
	return /* @__PURE__ */ React.createElement("main", { className: "pisell-sale-detail-main" }, showCustomer ? /* @__PURE__ */ React.createElement("div", { className: "pisell-sale-detail-client-entry" }, /* @__PURE__ */ React.createElement(Client, {
		dataSource: {
			customer: dataSource.customer,
			sales: dataSource.sales
		},
		isShowAvatar: true
	}), /* @__PURE__ */ React.createElement(SaleQrButton, { onClick: () => dataSource.sales.activateCamera() })) : null, showContact ? /* @__PURE__ */ React.createElement(Contact, {
		dataSource: (_dataSource$sales$tem = dataSource.sales.tempOrder) === null || _dataSource$sales$tem === void 0 ? void 0 : _dataSource$sales$tem.contacts_info,
		sales: dataSource.sales,
		showAction: true,
		showEmpty: true
	}) : null, showCartItems ? /* @__PURE__ */ React.createElement("div", { className: "pisell-sale-detail-scroll-content" }, /* @__PURE__ */ React.createElement(CartItems, {
		dataSource: dataSource.cart,
		sales: dataSource.sales,
		showEmpty: true
	})) : null, showCartActions ? /* @__PURE__ */ React.createElement(CartActions, {
		dataSource: {
			cart: dataSource.cart,
			sales: dataSource.sales,
			summary: dataSource.summary
		},
		hasCartItems
	}) : null);
}
function SaleDetailTemplateA({ dataSource, mobilePresentation, moduleConfig, renderType, variant }) {
	var _moduleConfig$amountD;
	const [mobileSheetOpen, setMobileSheetOpen] = useState(false);
	const hiddenModules = (moduleConfig === null || moduleConfig === void 0 ? void 0 : moduleConfig.hidden) || [];
	const showAmountDetails = !hiddenModules.includes("amountDetails");
	const showOrderActions = !hiddenModules.includes("orderActions");
	const isMobileBottomSheet = variant === "phone" && renderType === "current" && mobilePresentation === "bottomSheet";
	const actionButtonGroupList = useSaleDetailActions({
		dataSource,
		actions: [
			{
				name: "note",
				row: 1,
				order: 10
			},
			{
				name: "save",
				row: 1,
				order: 20,
				buttonProps: { icon: null }
			},
			{
				name: "checkout",
				row: 1,
				order: 30,
				hidden: false,
				buttonProps: { icon: null }
			}
		]
	});
	const actionOverlays = actionButtonGroupList.flat().map((item) => item.renderAfter).filter(Boolean);
	const showFooter = showAmountDetails || showOrderActions && actionButtonGroupList.length;
	const bodyContent = /* @__PURE__ */ React.createElement("main", { className: "pisell-sale-detail-tmpl-body" }, /* @__PURE__ */ React.createElement("section", { className: "pisell-sale-detail-tmpl-content" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-sale-detail-inline-layout" }, /* @__PURE__ */ React.createElement(SaleDetailTemplateAMain, {
		dataSource,
		moduleConfig
	}))));
	const footerContent = showFooter ? /* @__PURE__ */ React.createElement("div", { className: "pisell-sale-detail-footer" }, showAmountDetails ? /* @__PURE__ */ React.createElement(AmountDetails, {
		defaultExpanded: moduleConfig === null || moduleConfig === void 0 || (_moduleConfig$amountD = moduleConfig.amountDetails) === null || _moduleConfig$amountD === void 0 ? void 0 : _moduleConfig$amountD.defaultExpanded,
		dataSource: {
			sales: dataSource.sales,
			summary: dataSource.summary
		}
	}) : null, showOrderActions && actionButtonGroupList.length ? /* @__PURE__ */ React.createElement("div", { className: "pisell-sale-detail-button-actions pisell-sale-detail-button-actions--template-a" }, /* @__PURE__ */ React.createElement(ButtonGroupPreview, { buttonGroupList: actionButtonGroupList }), actionOverlays) : null) : null;
	if (isMobileBottomSheet) return /* @__PURE__ */ React.createElement("div", { className: "pisell-sale-detail-tmpl-a pisell-sale-detail-tmpl-a--mobile-sheet" }, /* @__PURE__ */ React.createElement(PersistentBottomSheet, {
		open: mobileSheetOpen,
		onOpenChange: setMobileSheetOpen,
		maxHeight: "95dvh",
		mask: true,
		maskClosable: true,
		destroyOnHidden: false,
		className: classNames("pisell-sale-detail-mobile-sheet", { "pisell-sale-detail-mobile-sheet--open": mobileSheetOpen }),
		header: /* @__PURE__ */ React.createElement("button", {
			type: "button",
			className: classNames("pisell-sale-detail-mobile-sheet__handler", { "pisell-sale-detail-mobile-sheet__handler--open": mobileSheetOpen }),
			"aria-expanded": mobileSheetOpen,
			onClick: () => setMobileSheetOpen((open) => !open)
		}, /* @__PURE__ */ React.createElement("span", { className: "pisell-sale-detail-mobile-sheet__handler-icon" }, /* @__PURE__ */ React.createElement(Iconfont, { type: "pisell2-chevron-down-double" }))),
		classNames: {
			body: classNames("pisell-sale-detail-mobile-sheet__body", { "pisell-sale-detail-mobile-sheet__body--open": mobileSheetOpen }),
			footer: "pisell-sale-detail-mobile-sheet__footer pisell-sale-detail-mobile-sheet__footer--safe-area"
		},
		footer: footerContent,
		zIndex: 100
	}, bodyContent));
	return /* @__PURE__ */ React.createElement("div", { className: "pisell-sale-detail-tmpl-a" }, /* @__PURE__ */ React.createElement("main", { className: "pisell-sale-detail-tmpl-body" }, /* @__PURE__ */ React.createElement("section", { className: "pisell-sale-detail-tmpl-content" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-sale-detail-inline-layout" }, /* @__PURE__ */ React.createElement(SaleDetailTemplateAMain, {
		dataSource,
		moduleConfig
	}), footerContent))));
}
//#endregion
export { SaleDetailTemplateA };
