"use strict";

exports.__esModule = true;
exports.default = void 0;
var _pipe2 = _interopRequireDefault(require("lodash/fp/pipe"));
var _split2 = _interopRequireDefault(require("lodash/fp/split"));
var _last2 = _interopRequireDefault(require("lodash/fp/last"));
var _get2 = _interopRequireDefault(require("lodash/fp/get"));
var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
var _map2 = _interopRequireDefault(require("lodash/fp/map"));
var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _cssColorFunction = require("css-color-function");
var _classnames = _interopRequireDefault(require("classnames"));
var _provider = _interopRequireDefault(require("../../atom/provider"));
var _tag = _interopRequireDefault(require("../../atom/tag"));
var _icon = _interopRequireDefault(require("../../atom/icon"));
var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
var _bulletPointMenuButton = _interopRequireDefault(require("../../molecule/bullet-point-menu-button"));
var _colors = require("../../variables/colors");
var _cardImagePreview = _interopRequireDefault(require("../../atom/card-image-preview"));
var _checkboxWithTitle = _interopRequireDefault(require("../../atom/checkbox-with-title"));
var _style = _interopRequireDefault(require("./style.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const ListItem = ({
  buttonLink,
  secondButtonLink,
  bulletPointMenuButton,
  tags,
  title,
  provider,
  selected,
  selectedColor,
  subtitle,
  dataColumns,
  order,
  'aria-label': ariaLabel,
  disabled = false,
  contentType,
  isBulkStyle = false,
  isOverflowHidden = false,
  onClick = _noop2.default,
  leftIcon,
  image,
  checkbox,
  'data-name': dataName
}, context) => {
  const {
    skin
  } = context;
  const primarySelectedColor = selectedColor || (0, _get2.default)('common.primary', skin);
  const mapUncapped = _map2.default.convert({
    cap: false
  });
  const checkable = checkbox || false;
  let isPublished = false;
  const selectedStyle = selected ? {
    backgroundColor: (0, _cssColorFunction.convert)(`color(${primarySelectedColor} a(0.07))`)
  } : {};
  const tagSelectedStyle = selected ? {
    backgroundColor: (0, _cssColorFunction.convert)(`color(${primarySelectedColor} a(0.15))`),
    color: primarySelectedColor
  } : {};
  const tagsView = mapUncapped((tag, index) => {
    isPublished = tag.type === 'success';
    return /*#__PURE__*/_react.default.createElement("div", {
      key: index,
      className: _style.default.tag
    }, /*#__PURE__*/_react.default.createElement(_tag.default, _extends({}, tag, {
      customStyle: tagSelectedStyle
    })));
  })(tags);
  const dataColumnsView = mapUncapped((dataColumn, index) => {
    return /*#__PURE__*/_react.default.createElement("div", {
      key: index,
      className: _style.default[dataColumn.className]
    }, dataColumn.type ? /*#__PURE__*/_react.default.createElement(_tag.default, dataColumn) : dataColumn.label);
  })(dataColumns);
  const orderView = order !== null && order !== undefined ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.order,
    "aria-label": ariaLabel
  }, order + 1) : null;
  const extractedIndex = (0, _pipe2.default)((0, _split2.default)('-'), _last2.default)(dataName);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(_style.default.wrapper, isBulkStyle ? _style.default.gridLayout : _style.default.flexLayout, subtitle && _style.default.withSubtitle, disabled && _style.default.disabled, onClick !== _noop2.default && !disabled && _style.default.cursorPointer, checkbox?.checked && _style.default.checked),
    onClick: !disabled ? onClick : undefined,
    style: selectedStyle,
    "data-name": dataName
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(_style.default.dataColumnsWrapper, isOverflowHidden && _style.default.hiddenOverflowX)
  }, isPublished && contentType === 'certification' ? orderView : null, leftIcon || image || checkable ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.leftSection
  }, checkable ? /*#__PURE__*/_react.default.createElement(_checkboxWithTitle.default, checkbox) : null, leftIcon && !image ? /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconName: leftIcon.iconName,
    gradientBackground: leftIcon.gradientBackground || true,
    iconColor: leftIcon.iconColor || primarySelectedColor,
    preset: leftIcon.preset || 'xl',
    borderRadius: leftIcon.borderRadius || '25%'
  }) : null, !leftIcon && image ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.containerImage
  }, /*#__PURE__*/_react.default.createElement(_cardImagePreview.default, {
    image: image
  })) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.titleWrapper
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.titleProviderWrapper
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.title,
    title: title
  }, title), !(0, _isEmpty2.default)(provider) ? /*#__PURE__*/_react.default.createElement(_tag.default, {
    label: provider.label,
    type: provider.type,
    className: _style.default.providerTag
  }) : null), subtitle ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.subtitle
  }, subtitle) : null), dataColumnsView), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.settings
  }, tagsView, selected ? /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconName: "circle-check",
    iconColor: primarySelectedColor,
    backgroundColor: _colors.COLORS.white,
    size: {
      faSize: 16,
      wrapperSize: 16
    }
  }) : null, buttonLink ? /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonLink) : null, secondButtonLink ? /*#__PURE__*/_react.default.createElement(_buttonLink.default, secondButtonLink) : null, !(0, _isEmpty2.default)(bulletPointMenuButton) ? /*#__PURE__*/_react.default.createElement(_bulletPointMenuButton.default, _extends({}, bulletPointMenuButton, {
    "data-name": `bullet-point-menu-button-${extractedIndex}`
  })) : null));
};
ListItem.contextTypes = {
  skin: _provider.default.childContextTypes.skin,
  translate: _provider.default.childContextTypes.translate
};
ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
  title: _propTypes.default.string.isRequired,
  subtitle: _propTypes.default.string,
  'data-name': _propTypes.default.string,
  provider: _propTypes.default.shape({
    label: _propTypes.default.string,
    type: _propTypes.default.oneOf(['info', 'default', 'success', 'failure', 'warning', 'progress'])
  }),
  selected: _propTypes.default.bool,
  selectedColor: _propTypes.default.string,
  dataColumns: _propTypes.default.arrayOf(_propTypes.default.shape({
    label: _propTypes.default.string,
    type: _propTypes.default.oneOf(['success', 'failure', 'warning', 'progress', 'default']),
    className: _propTypes.default.oneOf(['cell', 'title'])
  })),
  buttonLink: _propTypes.default.shape({
    type: _propTypes.default.string,
    label: _propTypes.default.string,
    ariaLabel: _propTypes.default.string,
    dataName: _propTypes.default.string,
    icon: _propTypes.default.shape({
      position: _propTypes.default.string,
      type: _propTypes.default.string
    }),
    onClick: _propTypes.default.func
  }),
  secondButtonLink: _propTypes.default.shape({
    type: _propTypes.default.string,
    label: _propTypes.default.string,
    ariaLabel: _propTypes.default.string,
    dataName: _propTypes.default.string,
    icon: _propTypes.default.shape({
      position: _propTypes.default.string,
      type: _propTypes.default.string
    }),
    onClick: _propTypes.default.func
  }),
  bulletPointMenuButton: _propTypes.default.shape({
    buttonAriaLabel: _propTypes.default.string,
    menuAriaLabel: _propTypes.default.string,
    buttons: _propTypes.default.arrayOf(_propTypes.default.shape({
      'data-name': _propTypes.default.string,
      label: _propTypes.default.string,
      type: _propTypes.default.string,
      onClick: _propTypes.default.func
    })),
    onClick: _propTypes.default.func
  }),
  tags: _propTypes.default.arrayOf(_propTypes.default.shape({
    label: _propTypes.default.string,
    type: _propTypes.default.oneOf(['success', 'failure', 'warning', 'progress', 'default'])
  })),
  disabled: _propTypes.default.bool,
  onClick: _propTypes.default.func,
  isBulkStyle: _propTypes.default.bool,
  isOverflowHidden: _propTypes.default.bool,
  order: _propTypes.default.number,
  'aria-label': _propTypes.default.string,
  contentType: _propTypes.default.string,
  id: _propTypes.default.string,
  leftIcon: _propTypes.default.shape({
    iconName: _propTypes.default.string,
    iconColor: _propTypes.default.string,
    backgroundColor: _propTypes.default.string,
    borderRadius: _propTypes.default.string,
    preset: _propTypes.default.string,
    gradientBackground: _propTypes.default.bool,
    size: _propTypes.default.number,
    wrapperSize: _propTypes.default.number
  }),
  image: _propTypes.default.string,
  checkbox: _propTypes.default.shape(_checkboxWithTitle.default.propTypes)
} : {};
var _default = exports.default = ListItem;
//# sourceMappingURL=index.js.map