import React from "react";
import { formatAmount, createArray, image, locales } from "@pisell/utils";
import classNames from "classnames";
import BrowserSelect from "../../browserSelect";
import CollapsibleList from "../../collapsibleList";
import { renderBundles } from "../../collapsibleList/utils";
import "./index.less";
var SelectProductItem = function SelectProductItem(_ref) {
  var _item$_extend, _item$_extend2;
  var item = _ref.item,
    _onClick = _ref.onClick,
    onChangeQuantity = _ref.onChangeQuantity,
    amountSymbol = _ref.amountSymbol,
    style = _ref.style,
    className = _ref.className,
    disabled = _ref.disabled;
  var list = createArray(100, function (d, i) {
    var item = {
      label: i,
      value: i
    };
    if (i === 0) {
      item.label = locales.getText("pisell2.text.remove");
    }
    return item;
  });
  return /*#__PURE__*/React.createElement("div", {
    style: style,
    className: classNames("server-select-product", className),
    onClick: function onClick() {
      _onClick === null || _onClick === void 0 || _onClick(item);
    }
  }, item.cover ? /*#__PURE__*/React.createElement("img", {
    src: image.ali(item.cover, 100),
    className: "server-select-product-cover"
  }) : /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", {
    className: "server-select-product-content"
  }, /*#__PURE__*/React.createElement("div", {
    className: "server-select-product-title"
  }, item.title), /*#__PURE__*/React.createElement("div", {
    className: "server-select-product-subtitle"
  }, item.subtitle || ""), (((_item$_extend = item._extend) === null || _item$_extend === void 0 || (_item$_extend = _item$_extend.other) === null || _item$_extend === void 0 ? void 0 : _item$_extend.bundle) || []).length ? /*#__PURE__*/React.createElement(CollapsibleList, {
    style: {
      width: "100%"
    },
    list: ((_item$_extend2 = item._extend) === null || _item$_extend2 === void 0 || (_item$_extend2 = _item$_extend2.other) === null || _item$_extend2 === void 0 ? void 0 : _item$_extend2.bundle) || [],
    renderItem: function renderItem(item) {
      return renderBundles(item, amountSymbol);
    }
  }) : null, /*#__PURE__*/React.createElement("div", {
    className: "server-select-product-quantity",
    onClick: function onClick(e) {
      e.preventDefault();
      e.stopPropagation();
    }
  }, /*#__PURE__*/React.createElement(BrowserSelect, {
    options: list,
    value: item._extend.quantity,
    onChange: onChangeQuantity,
    style: {
      minWidth: 50
    },
    disabled: disabled
  }), /*#__PURE__*/React.createElement("div", {
    className: "server-select-product-total"
  }, item._extend.origin_total !== item._extend.total && /*#__PURE__*/React.createElement("span", {
    className: "server-select-product-origin-total"
  }, formatAmount(item._extend.origin_total * item._extend.quantity, 2, amountSymbol)), formatAmount(item._extend.total * item._extend.quantity, 2, amountSymbol)))));
};
export default SelectProductItem;