import React, { useContext } from 'react';
import cls from 'clsx';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';
import { Tag } from '../tag';
import { Image } from '../image';
import { isDef } from '../utils';

function isStringOrNumber(target) {
  return typeof target === 'string' || typeof target === 'number';
}

var ProductCard = function ProductCard(props) {
  var _useContext = useContext(ConfigProviderContext),
      prefixCls = _useContext.prefixCls,
      createNamespace = _useContext.createNamespace;

  var _createNamespace = createNamespace('product-card', prefixCls),
      bem = _createNamespace[0];

  var renderTitle = function renderTitle() {
    if (props.title) {
      return /*#__PURE__*/React.createElement("div", {
        className: cls(bem('title'), 'rv-multi-ellipsis--l2')
      }, props.title);
    }

    return null;
  };

  var renderThumbTag = function renderThumbTag() {
    if (props.tag) {
      return /*#__PURE__*/React.createElement("div", {
        className: cls(bem('tag'))
      }, isStringOrNumber(props.tag) ? /*#__PURE__*/React.createElement(Tag, {
        mark: true,
        type: "danger"
      }, props.tag) : props.tag);
    }

    return null;
  };

  var renderThumbImage = function renderThumbImage() {
    if (!props.thumb) return null;

    if (typeof props.thumb === 'string') {
      return /*#__PURE__*/React.createElement(Image, {
        src: props.thumb,
        fit: "cover",
        width: "100%",
        height: "100%",
        lazyload: props.lazyload
      });
    }

    return props.thumb;
  };

  var renderThumb = function renderThumb() {
    if (props.thumb) {
      return /*#__PURE__*/React.createElement("a", {
        href: props.thumbLink,
        className: cls(bem('thumb')),
        onClick: props.onClickThumb
      }, renderThumbImage(), renderThumbTag());
    }

    return null;
  };

  var renderDesc = function renderDesc() {
    if (props.desc) {
      return /*#__PURE__*/React.createElement("div", {
        className: cls(bem('desc'), 'rv-ellipsis')
      }, props.desc);
    }

    return null;
  };

  var renderPriceText = function renderPriceText() {
    if (isStringOrNumber(props.price)) {
      var priceArr = props.price.toString().split('.');
      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
        className: cls(bem('price-currency'))
      }, props.currency), /*#__PURE__*/React.createElement("span", {
        className: cls(bem('price-integer'))
      }, priceArr[0]), props.decimal && /*#__PURE__*/React.createElement(React.Fragment, null, ".", /*#__PURE__*/React.createElement("span", {
        className: cls(bem('price-decimal'))
      }, priceArr[1] || '00')));
    }

    return props.price;
  };

  var renderOriginalPrice = function renderOriginalPrice() {
    return /*#__PURE__*/React.createElement("div", {
      className: cls(bem('origin-price'))
    }, isStringOrNumber(props.originPrice) ? props.currency + " " + props.originPrice : props.originPrice);
  };

  var showNum = isDef(props.num);
  var showPrice = isDef(props.price);
  var showOriginPrice = isDef(props.originPrice);
  var showBottom = showNum || showPrice || showOriginPrice || props.bottom;
  var Price = showPrice && /*#__PURE__*/React.createElement("div", {
    className: cls(bem('price'))
  }, renderPriceText());
  var OriginPrice = showOriginPrice && renderOriginalPrice();
  var Num = showNum && /*#__PURE__*/React.createElement("div", {
    className: cls(bem('num'))
  }, isStringOrNumber(props.num) ? "x" + props.num : props.num);
  var Footer = props.footer && /*#__PURE__*/React.createElement("div", {
    className: cls(bem('footer'))
  }, props.footer);
  var Bottom = showBottom && /*#__PURE__*/React.createElement("div", {
    className: cls(bem('bottom'))
  }, props.priceTop, Price, OriginPrice, Num, props.bottom);
  return /*#__PURE__*/React.createElement("div", {
    className: cls(bem(), props.className),
    style: props.style,
    onClick: props.onClick
  }, /*#__PURE__*/React.createElement("div", {
    className: cls(bem('header'))
  }, renderThumb(), /*#__PURE__*/React.createElement("div", {
    className: cls(bem('content', {
      centered: props.centered
    }))
  }, /*#__PURE__*/React.createElement("div", null, renderTitle(), renderDesc(), props.tags), Bottom)), Footer);
}; // defaultProps defined if need


ProductCard.defaultProps = {
  currency: '¥',
  decimal: true
};
export default ProductCard;