import React from 'react';
import Decimal from 'decimal.js';
import { locales } from '@pisell/utils';
import { Iconfont } from '@pisell/materials';
import NumericStepper from "../../../../pro/NumericStepper";
import { useStore } from "../../hooks";
import "./index.less";
var OptionItemCard = function OptionItemCard(props) {
  var data = props.data,
    dataSource = props.dataSource,
    remainingCount = props.remainingCount;
  var symbol = useStore(function (s) {
    return s.symbol;
  });

  // 是否能选择多个
  // const isMultiple = dataSource?.ruleConfig?.max > 1;

  var renderItem = function 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(function (_item) {
        var 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"
        }, "".concat((data_3 === null || data_3 === void 0 ? void 0 : data_3.quantity) || 1, " \xD7"), " ", (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 {
      var 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"
      }, "".concat((data_3 === null || data_3 === void 0 ? void 0 : data_3.quantity) || 1, " \xD7"), " ", (data_3 === null || data_3 === void 0 ? void 0 : data_3.title) || (data_3 === null || data_3 === void 0 ? void 0 : data_3.name) || '');
    }
  };
  var calculateTotalPrice = function calculateTotalPrice(data_2_item) {
    var totalPrice = 0;
    if (Array.isArray(data_2_item)) {
      totalPrice = data_2_item.reduce(function (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 "".concat(totalPrice >= 0 ? '+' : '-').concat(symbol).concat(Math.abs(totalPrice));
  };
  var getGroupName = function getGroupName(key) {
    var _dataSource$_original;
    var 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(function (item) {
      return (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(function (item, index) {
    var 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: "".concat(item === null || item === void 0 ? void 0 : item.value, "-").concat(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(function (key) {
      var data_2_item = (data_2 === null || data_2 === void 0 ? void 0 : data_2[key]) || {}; // 第二层数据item
      return /*#__PURE__*/React.createElement("div", {
        className: "pisell-plus-sku-options-card-option-item-card-item-content",
        key: "".concat(item === null || item === void 0 ? void 0 : item.value, "-").concat(index, "-").concat(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: function 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: function onClick() {
        return 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'
      }
    }))));
  }));
};
export default OptionItemCard;