function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useContext, useMemo } from 'react';
import cls from 'clsx';
import { ExpandO } from '@react-vant/icons';
import Image from '../../image';
import ConfigProviderContext from '../../config-provider/ConfigProviderContext';
import { isSkuChoosable } from '../utils';

var SkuRowItem = function SkuRowItem(props) {
  var _props$skuValue, _props$skuValue2;

  var _useContext = useContext(ConfigProviderContext),
      prefixCls = _useContext.prefixCls,
      createNamespace = _useContext.createNamespace;

  var _createNamespace = createNamespace('sku-row', prefixCls),
      bem = _createNamespace[0];

  var classPrefix = props.largeImageMode ? 'image-item' : 'item';
  var imgUrl = useMemo(function () {
    var url = props.skuValue.imgUrl || props.skuValue.img_url;
    return props.largeImageMode ? url || 'https://img01.yzcdn.cn/upload_files/2020/06/24/FmKWDg0bN9rMcTp9ne8MXiQWGtLn.png' : url;
  }, [props.skuValue]);
  var choosable = useMemo(function () {
    if (!props.disableSoldoutSku) {
      return true;
    }

    return isSkuChoosable(props.skuList, props.selectedSku, {
      key: props.skuKeyStr,
      valueId: props.skuValue.id
    });
  }, [JSON.stringify(props.skuList), JSON.stringify(props.selectedSku), props.skuKeyStr]);

  var imageRender = function imageRender() {
    if (imgUrl) {
      return /*#__PURE__*/React.createElement(Image, {
        fit: "cover",
        src: imgUrl,
        lazyload: props.lazyload,
        className: cls(bem(classPrefix + "-img"))
      });
    }

    return null;
  };

  var onSelect = function onSelect() {
    if (choosable) {
      props.onSkuSelected(_extends({}, props.skuValue, {
        skuKeyStr: props.skuKeyStr
      }));
    }
  };

  var onPreviewImg = function onPreviewImg(event) {
    event.stopPropagation();
    var skuValue = props.skuValue,
        skuKeyStr = props.skuKeyStr;
    props.onSkuPreviewImage(_extends({}, skuValue, {
      ks: skuKeyStr,
      imgUrl: skuValue.imgUrl || skuValue.img_url
    }));
  };

  var choosed = props.skuValue.id === props.selectedSku[props.skuKeyStr];
  return /*#__PURE__*/React.createElement("span", {
    className: cls(bem(classPrefix, {
      active: choosed,
      disabled: !choosable
    })),
    onClick: onSelect
  }, imageRender(), /*#__PURE__*/React.createElement("div", {
    className: cls(bem(classPrefix + "-name"))
  }, props.largeImageMode ? /*#__PURE__*/React.createElement("span", {
    className: cls('rv-multi-ellipsis--l2')
  }, (_props$skuValue = props.skuValue) == null ? void 0 : _props$skuValue.name) : (_props$skuValue2 = props.skuValue) == null ? void 0 : _props$skuValue2.name), props.largeImageMode && (props.previewIcon || /*#__PURE__*/React.createElement(ExpandO, {
    className: cls(bem(classPrefix + "-img-icon")),
    onClick: onPreviewImg
  })));
};

export default SkuRowItem;