import React, { useMemo, useCallback } from 'react';
import Icon from "../../../../icon";
import { locales, image as imageAli } from '@pisell/utils';
import "./index.less";
var prefixCls = 'pisell-cart-sku-card__gift';
var Gift = function Gift(props) {
  var _displayGifts$;
  var _props$isShow = props.isShow,
    isShow = _props$isShow === void 0 ? false : _props$isShow,
    _props$totalCount = props.totalCount,
    totalCount = _props$totalCount === void 0 ? 0 : _props$totalCount,
    _props$selectedGifts = props.selectedGifts,
    selectedGifts = _props$selectedGifts === void 0 ? [] : _props$selectedGifts,
    _props$promptText = props.promptText,
    promptText = _props$promptText === void 0 ? '' : _props$promptText,
    onClick = props.onClick;
  var selectedCount = (selectedGifts === null || selectedGifts === void 0 ? void 0 : selectedGifts.length) || 0;
  var displayGifts = useMemo(function () {
    return (selectedGifts === null || selectedGifts === void 0 ? void 0 : selectedGifts.slice(0, 5)) || [];
  }, [selectedGifts]);
  var renderImage = useCallback(function (item) {
    if (item !== null && item !== void 0 && item.image) {
      return /*#__PURE__*/React.createElement("img", {
        src: imageAli.ali(item === null || item === void 0 ? void 0 : item.image, 48),
        className: "product-cover"
      });
    }
    var displayText = item !== null && item !== void 0 && item.title ? item === null || item === void 0 ? void 0 : item.title.slice(0, 2) : '';
    return /*#__PURE__*/React.createElement("div", {
      className: "product-cover-text"
    }, displayText);
  }, [displayGifts]);
  if (!isShow) return null;
  console.log('Gift777', props, selectedCount);
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls),
    onClick: onClick
  }, /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "__label")
  }, locales.getText('pisell2.cart.sku-card.gift.title')), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "__content")
  }, !selectedCount ? /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "__text")
  }, promptText || locales.getText('pisell2.cart.sku-card.gift.select.title')) : /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "__images ").concat(selectedCount === 1 ? "".concat(prefixCls, "__images-single") : '')
  }, displayGifts.map(function (gift, index) {
    return /*#__PURE__*/React.createElement("div", {
      key: (gift === null || gift === void 0 ? void 0 : gift.id) || index,
      className: "".concat(prefixCls, "__image")
    }, renderImage(gift));
  }), selectedCount === 1 && /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "__title")
  }, (_displayGifts$ = displayGifts[0]) === null || _displayGifts$ === void 0 ? void 0 : _displayGifts$.title)), /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "__total")
  }, locales.getText('pisell2.cart.sku-card.gift.total')(totalCount)), /*#__PURE__*/React.createElement(Icon, {
    type: "pisell2-chevron-right",
    className: "".concat(prefixCls, "__arrow")
  })));
};
export default Gift;