import React from 'react';
import { locales } from '@pisell/utils';
import Selector from "../../../../pro/Selector";
import useStore from "../../hooks/useStore";
import "./index.less";
var VariantCard = function VariantCard(props) {
  var _props$dataSource, _props$dataSource2;
  var _ref = props || {},
    dataSource = _ref.dataSource,
    actions = _ref.actions;
  var symbol = useStore(function (s) {
    return s.symbol;
  });
  var skuCardConfig = useStore(function (s) {
    return s.skuCardConfig;
  });
  var isVariantPriceVisible = (skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.variantPriceVisible) === true;
  var priceConfig = skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.price;
  var priceText = formatPriceText({
    symbol: symbol,
    price: dataSource === null || dataSource === void 0 ? void 0 : dataSource.price
  });
  var handleClick = function handleClick(e) {
    e.stopPropagation();
    if (dataSource !== null && dataSource !== void 0 && dataSource.disabled) return;
    if (dataSource !== null && dataSource !== void 0 && dataSource.selected) {
      actions.update(dataSource._key, {
        quantity: 0
      });
    } else {
      actions.update(dataSource._key, {
        quantity: 1,
        data: dataSource._original
      });
    }
  };
  return /*#__PURE__*/React.createElement(Selector.Item, props || {}, /*#__PURE__*/React.createElement("div", {
    className: "pisell-sku-options-selection-variant-card",
    onClick: handleClick
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-sku-options-selection-variant-card__title"
  }, ((_props$dataSource = props.dataSource) === null || _props$dataSource === void 0 ? void 0 : _props$dataSource.title) || '', ((_props$dataSource2 = props.dataSource) === null || _props$dataSource2 === void 0 || (_props$dataSource2 = _props$dataSource2._extra) === null || _props$dataSource2 === void 0 ? void 0 : _props$dataSource2.hasStock) === false ? " (".concat(locales.getText('pisell2.skuOptionsSelection.variantItemCard.soldOut'), ")") : null), isVariantPriceVisible && (priceConfig === null || priceConfig === void 0 ? void 0 : priceConfig.visible) !== false && !!priceText ? /*#__PURE__*/React.createElement("div", {
    className: "pisell-sku-options-selection-variant-card__price",
    style: {
      fontSize: priceConfig === null || priceConfig === void 0 ? void 0 : priceConfig.fontSize,
      fontWeight: priceConfig === null || priceConfig === void 0 ? void 0 : priceConfig.fontWeight,
      color: priceConfig === null || priceConfig === void 0 ? void 0 : priceConfig.color
    }
  }, locales.getText('pisell2.skuOptionsSelection.variantItemCard.price'), ":", priceText) : null));
};
function formatPriceText(params) {
  var symbol = params.symbol || '$';
  var price = Number(params.price);
  if (!params.price && params.price !== 0) return '';
  if (Number.isNaN(price)) return '';
  return "".concat(symbol).concat(price.toFixed(2));
}
export default VariantCard;