import NumericStepper from "../../../../pro/NumericStepper/index.js";
import useStore_default from "../../hooks/useStore.js";
import React from "react";
import { locales } from "@pisell/utils";
import Decimal from "decimal.js";
import { Iconfont } from "@pisell/materials";
import "./index.less";
//#region src/plus/skuOptionsSelection/components/OptionsCard/OptionItemCard.tsx
const OptionItemCard = (props) => {
	const { data, dataSource, remainingCount } = props;
	const symbol = useStore_default((s) => s.symbol);
	const renderItem = (data_2_item) => {
		if (!Array.isArray(data_2_item) && !Object.keys(data_2_item || {}).length) return null;
		if (Array.isArray(data_2_item)) return data_2_item.map((_item) => {
			const data_3 = (_item === null || _item === void 0 ? void 0 : _item.data) || {};
			return /* @__PURE__ */ React.createElement("div", {
				key: _item === null || _item === void 0 ? void 0 : _item.id,
				className: "pisell-plus-sku-options-card-option-item-card-item-content-text"
			}, `${(data_3 === null || data_3 === void 0 ? void 0 : data_3.quantity) || 1} ×`, " ", (data_3 === null || data_3 === void 0 ? void 0 : data_3.title) || (data_3 === null || data_3 === void 0 ? void 0 : data_3.name) || "");
		});
		else {
			const data_3 = (data_2_item === null || data_2_item === void 0 ? void 0 : data_2_item.data) || {};
			return /* @__PURE__ */ React.createElement("div", {
				key: data_3 === null || data_3 === void 0 ? void 0 : data_3.id,
				className: "pisell-plus-sku-options-card-option-item-card-item-content-text"
			}, `${(data_3 === null || data_3 === void 0 ? void 0 : data_3.quantity) || 1} ×`, " ", (data_3 === null || data_3 === void 0 ? void 0 : data_3.title) || (data_3 === null || data_3 === void 0 ? void 0 : data_3.name) || "");
		}
	};
	const calculateTotalPrice = (data_2_item) => {
		let totalPrice = 0;
		if (Array.isArray(data_2_item)) totalPrice = data_2_item.reduce((acc, _item) => {
			return acc.plus(new Decimal((_item === null || _item === void 0 ? void 0 : _item.totalPrice) || 0));
		}, new Decimal(0)).toNumber();
		else if (Object.keys(data_2_item || {}).length) totalPrice = new Decimal((data_2_item === null || data_2_item === void 0 ? void 0 : data_2_item.totalPrice) || 0).toNumber();
		return `${totalPrice >= 0 ? "+" : "-"}${symbol}${Math.abs(totalPrice)}`;
	};
	const getGroupName = (key) => {
		var _dataSource$_original;
		const groupItem = dataSource === null || dataSource === void 0 || (_dataSource$_original = dataSource._original) === null || _dataSource$_original === void 0 || (_dataSource$_original = _dataSource$_original.option_group) === null || _dataSource$_original === void 0 ? void 0 : _dataSource$_original.find((item) => (item === null || item === void 0 ? void 0 : item.id) == key);
		return (groupItem === null || groupItem === void 0 ? void 0 : groupItem.title) || (groupItem === null || groupItem === void 0 ? void 0 : groupItem.name) || "";
	};
	return /* @__PURE__ */ React.createElement("div", { className: "pisell-plus-sku-options-card-option-item-card" }, data === null || data === void 0 ? void 0 : data.map((item, index) => {
		const data_2 = (item === null || item === void 0 ? void 0 : item.data) || {};
		if (!data_2 || Object.keys(data_2 || {}).length === 0) return null;
		return /* @__PURE__ */ React.createElement("div", {
			className: "pisell-plus-sku-options-card-option-item-card-item",
			key: `${item === null || item === void 0 ? void 0 : item.value}-${index}`
		}, /* @__PURE__ */ React.createElement("div", { className: "pisell-plus-sku-options-card-option-item-card-item-float" }, locales.getText("pisell2.skuOptionsSelection.optionItemCard.typeText"), " ", index + 1), /* @__PURE__ */ React.createElement("div", { className: "pisell-plus-sku-options-card-option-item-card-item-section" }, Object.keys(data_2).map((key) => {
			const data_2_item = (data_2 === null || data_2 === void 0 ? void 0 : data_2[key]) || {};
			return /* @__PURE__ */ React.createElement("div", {
				className: "pisell-plus-sku-options-card-option-item-card-item-content",
				key: `${item === null || item === void 0 ? void 0 : item.value}-${index}-${key}`
			}, /* @__PURE__ */ React.createElement("div", { className: "pisell-plus-sku-options-card-option-item-card-item-content-top" }, /* @__PURE__ */ React.createElement("span", { className: "pisell-plus-sku-options-card-option-item-card-item-content-title" }, getGroupName(key)), /* @__PURE__ */ React.createElement("span", { className: "pisell-plus-sku-options-card-option-item-card-item-content-price" }, calculateTotalPrice(data_2_item))), renderItem(data_2_item));
		}), /* @__PURE__ */ React.createElement("div", { className: "pisell-plus-sku-options-card-option-item-card-item-section-divider" })), /* @__PURE__ */ React.createElement("div", { className: "pisell-plus-sku-options-card-option-item-card-item-footer" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-plus-sku-options-card-option-item-card-item-footer-stepper" }, /* @__PURE__ */ React.createElement(NumericStepper, {
			min: 0,
			max: ((item === null || item === void 0 ? void 0 : item.quantity) || 1) + remainingCount,
			value: (item === null || item === void 0 ? void 0 : item.quantity) || 1,
			onChange: (value) => {
				var _props$onQuantityChan;
				props === null || props === void 0 || (_props$onQuantityChan = props.onQuantityChange) === null || _props$onQuantityChan === void 0 || _props$onQuantityChan.call(props, index, value);
			},
			horizontalPadding: "16px"
		})), /* @__PURE__ */ React.createElement("div", {
			className: "pisell-plus-sku-options-card-option-item-card-item-footer-info",
			onClick: () => props.onEdit(index)
		}, /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.skuOptionsSelection.optionItemCard.editSelections")), /* @__PURE__ */ React.createElement(Iconfont, {
			type: "pisell2-chevron-right",
			style: {
				fontSize: "20px",
				color: "#000000"
			}
		}))));
	}));
};
//#endregion
export { OptionItemCard as default };
