import { jsx as _jsx } from "react/jsx-runtime";
import { useContext, useMemo } from 'react';
import cls from 'clsx';
import ConfigProviderContext from '../../config-provider/ConfigProviderContext';

const SkuRowPropItem = props => {
  var _a;

  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace('sku-row', prefixCls);
  const choosed = useMemo(() => {
    const {
      selectedProp,
      skuKeyStr,
      skuValue
    } = props;

    if (selectedProp && selectedProp[skuKeyStr]) {
      return selectedProp[skuKeyStr].indexOf(skuValue.id) > -1;
    }

    return false;
  }, [JSON.stringify(props.selectedProp), JSON.stringify(props.skuValue), props.skuKeyStr]);

  const onSelect = () => {
    props.onSkuPropSelected(Object.assign(Object.assign({}, props.skuValue), {
      skuKeyStr: props.skuKeyStr,
      multiple: props.multiple
    }));
  };

  return _jsx("span", Object.assign({
    className: cls(bem('item', {
      active: choosed
    })),
    onClick: onSelect
  }, {
    children: _jsx("span", Object.assign({
      className: cls(bem('item-name'))
    }, {
      children: (_a = props.skuValue) === null || _a === void 0 ? void 0 : _a.name
    }))
  }));
};

export default SkuRowPropItem;