import useEngineContext from "../../hooks/useEngineContext.js";
import { request } from "../../utils/index.js";
import locales_default from "./locales.js";
import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
import { locales } from "@pisell/utils";
import { Button, Icon, PisellModal, Tag } from "@pisell/materials";
import "./index.less";
//#region src/components/productStockCheckModal/index.tsx
/** 收起时列表最多展示的条目数 */
const MAX_COLLAPSED_ITEMS = 5;
const ProductStockCheckModal = (props, ref) => {
	var _context$engine, _context$appHelper, _context$appHelper2, _context$appHelper2$i;
	const context = useEngineContext();
	locales.init(locales_default, (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || "en");
	request.setRequest(context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.utils) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.request);
	const isTerminal = context === null || context === void 0 || (_context$appHelper2 = context.appHelper) === null || _context$appHelper2 === void 0 || (_context$appHelper2 = _context$appHelper2.utils) === null || _context$appHelper2 === void 0 || (_context$appHelper2$i = _context$appHelper2.isTerminal) === null || _context$appHelper2$i === void 0 ? void 0 : _context$appHelper2$i.call(_context$appHelper2);
	const [visible, setVisible] = useState(false);
	const modalParamsRef = useRef();
	const [items, setItems] = useState([]);
	const [isAllItemsSoldOut, setIsAllItemsSoldOut] = useState(false);
	const [listExpanded, setListExpanded] = useState(false);
	const onOpen = useCallback((params) => {
		var _params$unavailablePr, _params$isAllItemsSol, _props$onOpen;
		modalParamsRef.current = params;
		setItems((_params$unavailablePr = params === null || params === void 0 ? void 0 : params.unavailableProducts) !== null && _params$unavailablePr !== void 0 ? _params$unavailablePr : []);
		setIsAllItemsSoldOut((_params$isAllItemsSol = params === null || params === void 0 ? void 0 : params.isAllItemsSoldOut) !== null && _params$isAllItemsSol !== void 0 ? _params$isAllItemsSol : false);
		setListExpanded(false);
		setVisible(true);
		(_props$onOpen = props.onOpen) === null || _props$onOpen === void 0 || _props$onOpen.call(props);
	}, [props]);
	const onClose = useCallback(() => {
		var _props$onClose;
		modalParamsRef.current = void 0;
		setItems([]);
		setIsAllItemsSoldOut(false);
		setVisible(false);
		(_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props);
	}, []);
	useImperativeHandle(ref, () => ({
		open: onOpen,
		close: onClose
	}));
	const handleReturn = useCallback(() => {
		var _props$onReturn;
		onClose();
		(_props$onReturn = props.onReturn) === null || _props$onReturn === void 0 || _props$onReturn.call(props, items);
	}, [
		props.onReturn,
		onClose,
		items
	]);
	const handleContinue = useCallback(() => {
		onClose();
		if (isAllItemsSoldOut) handleReturn();
		else {
			var _props$onContinue;
			(_props$onContinue = props.onContinue) === null || _props$onContinue === void 0 || _props$onContinue.call(props, items);
		}
	}, [
		props.onContinue,
		onClose,
		isAllItemsSoldOut,
		items
	]);
	const showListExpandToggle = useMemo(() => items.length > MAX_COLLAPSED_ITEMS, [items.length]);
	const displayItems = useMemo(() => {
		if (!showListExpandToggle || listExpanded) return items;
		return items.slice(0, MAX_COLLAPSED_ITEMS);
	}, [
		items,
		listExpanded,
		showListExpandToggle
	]);
	return /* @__PURE__ */ React.createElement(PisellModal, {
		platform: isTerminal ? "h5" : void 0,
		visible,
		header: false,
		footer: null,
		maskClosable: false,
		destroyOnClose: true,
		closable: false,
		onClose,
		onCancel: onClose,
		wrapClassName: "product-stock-check-modal",
		style: { zIndex: 1001 }
	}, /* @__PURE__ */ React.createElement("div", { className: "product-stock-check-modal-inner" }, /* @__PURE__ */ React.createElement("div", {
		className: "product-stock-check-modal-icon",
		"aria-hidden": true
	}, /* @__PURE__ */ React.createElement("span", { className: "product-stock-check-modal-icon-mark" }, "!")), /* @__PURE__ */ React.createElement("h2", { className: "product-stock-check-modal-title" }, isAllItemsSoldOut ? locales.getText("pisell2.product.stock.check.modal.all_items_title") : locales.getText("pisell2.product.stock.check.modal.title")), /* @__PURE__ */ React.createElement("p", { className: "product-stock-check-modal-subtitle" }, locales.getText("pisell2.product.stock.check.modal.subtitle")), /* @__PURE__ */ React.createElement("div", { className: "product-stock-check-modal-list" }, /* @__PURE__ */ React.createElement("div", { className: "product-stock-check-modal-list-items" }, displayItems.map((item, index) => /* @__PURE__ */ React.createElement("div", {
		key: index,
		className: "product-stock-check-modal-item"
	}, /* @__PURE__ */ React.createElement("div", { className: "product-stock-check-modal-item-text" }, /* @__PURE__ */ React.createElement("span", { className: "product-stock-check-modal-item-title" }, item.title), /* @__PURE__ */ React.createElement("span", { className: "product-stock-check-modal-item-qty" }, locales.getText("pisell2.product.stock.check.modal.item.quantity.prefix"), " ", "x", item.quantity)), /* @__PURE__ */ React.createElement("span", { className: "product-stock-check-modal-tag" }, /* @__PURE__ */ React.createElement(Tag, { color: "error" }, locales.getText("pisell2.product.stock.check.modal.status.sold_out")))))), showListExpandToggle && /* @__PURE__ */ React.createElement("div", {
		className: "product-stock-check-modal-list-toggle",
		onClick: () => setListExpanded((v) => !v)
	}, listExpanded ? locales.getText("pisell2.product.stock.check.modal.btn.collapse") : locales.getText("pisell2.product.stock.check.modal.btn.expand"), /* @__PURE__ */ React.createElement(Icon, { type: listExpanded ? "pisell2-chevron-up-double" : "pisell2-chevron-down-double" }))), /* @__PURE__ */ React.createElement("div", { className: "product-stock-check-modal-buttons" }, /* @__PURE__ */ React.createElement(Button, {
		type: "primary",
		onClick: handleContinue
	}, isAllItemsSoldOut ? locales.getText("pisell2.product.stock.check.modal.btn.remove_all_continue") : locales.getText("pisell2.product.stock.check.modal.btn.remove_continue")), /* @__PURE__ */ React.createElement(Button, {
		type: "text",
		onClick: handleReturn
	}, locales.getText("pisell2.product.stock.check.modal.btn.go_back")))));
};
var productStockCheckModal_default = forwardRef(ProductStockCheckModal);
//#endregion
export { productStockCheckModal_default as default };
