import _pipe from "lodash/fp/pipe";
import _split from "lodash/fp/split";
import _last from "lodash/fp/last";
import _get from "lodash/fp/get";
import _noop from "lodash/fp/noop";
import _map from "lodash/fp/map";
import _isEmpty from "lodash/fp/isEmpty";
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); }
import React from 'react';
import PropTypes from 'prop-types';
import { convert } from 'css-color-function';
import classnames from 'classnames';
import Provider from '../../atom/provider';
import Tag from '../../atom/tag';
import FaIcon from '../../atom/icon';
import ButtonLink from '../../atom/button-link';
import BulletPointMenuButton from '../../molecule/bullet-point-menu-button';
import { COLORS } from '../../variables/colors';
import CardImagePreview from '../../atom/card-image-preview';
import CheckboxWithTitle from '../../atom/checkbox-with-title';
import style from './style.css';
const ListItem = ({
  buttonLink,
  secondButtonLink,
  bulletPointMenuButton,
  tags,
  title,
  provider,
  selected,
  selectedColor,
  subtitle,
  dataColumns,
  order,
  'aria-label': ariaLabel,
  disabled = false,
  contentType,
  isBulkStyle = false,
  isOverflowHidden = false,
  onClick = _noop,
  leftIcon,
  image,
  checkbox,
  'data-name': dataName
}, context) => {
  const {
    skin
  } = context;
  const primarySelectedColor = selectedColor || _get('common.primary', skin);
  const mapUncapped = _map.convert({
    cap: false
  });
  const checkable = checkbox || false;
  let isPublished = false;
  const selectedStyle = selected ? {
    backgroundColor: convert(`color(${primarySelectedColor} a(0.07))`)
  } : {};
  const tagSelectedStyle = selected ? {
    backgroundColor: convert(`color(${primarySelectedColor} a(0.15))`),
    color: primarySelectedColor
  } : {};
  const tagsView = mapUncapped((tag, index) => {
    isPublished = tag.type === 'success';
    return /*#__PURE__*/React.createElement("div", {
      key: index,
      className: style.tag
    }, /*#__PURE__*/React.createElement(Tag, _extends({}, tag, {
      customStyle: tagSelectedStyle
    })));
  })(tags);
  const dataColumnsView = mapUncapped((dataColumn, index) => {
    return /*#__PURE__*/React.createElement("div", {
      key: index,
      className: style[dataColumn.className]
    }, dataColumn.type ? /*#__PURE__*/React.createElement(Tag, dataColumn) : dataColumn.label);
  })(dataColumns);
  const orderView = order !== null && order !== undefined ? /*#__PURE__*/React.createElement("div", {
    className: style.order,
    "aria-label": ariaLabel
  }, order + 1) : null;
  const extractedIndex = _pipe(_split('-'), _last)(dataName);
  return /*#__PURE__*/React.createElement("div", {
    className: classnames(style.wrapper, isBulkStyle ? style.gridLayout : style.flexLayout, subtitle && style.withSubtitle, disabled && style.disabled, onClick !== _noop && !disabled && style.cursorPointer, checkbox?.checked && style.checked),
    onClick: !disabled ? onClick : undefined,
    style: selectedStyle,
    "data-name": dataName
  }, /*#__PURE__*/React.createElement("div", {
    className: classnames(style.dataColumnsWrapper, isOverflowHidden && style.hiddenOverflowX)
  }, isPublished && contentType === 'certification' ? orderView : null, leftIcon || image || checkable ? /*#__PURE__*/React.createElement("div", {
    className: style.leftSection
  }, checkable ? /*#__PURE__*/React.createElement(CheckboxWithTitle, checkbox) : null, leftIcon && !image ? /*#__PURE__*/React.createElement(FaIcon, {
    iconName: leftIcon.iconName,
    gradientBackground: leftIcon.gradientBackground || true,
    iconColor: leftIcon.iconColor || primarySelectedColor,
    preset: leftIcon.preset || 'xl',
    borderRadius: leftIcon.borderRadius || '25%'
  }) : null, !leftIcon && image ? /*#__PURE__*/React.createElement("div", {
    className: style.containerImage
  }, /*#__PURE__*/React.createElement(CardImagePreview, {
    image: image
  })) : null) : null, /*#__PURE__*/React.createElement("div", {
    className: style.titleWrapper
  }, /*#__PURE__*/React.createElement("div", {
    className: style.titleProviderWrapper
  }, /*#__PURE__*/React.createElement("div", {
    className: style.title,
    title: title
  }, title), !_isEmpty(provider) ? /*#__PURE__*/React.createElement(Tag, {
    label: provider.label,
    type: provider.type,
    className: style.providerTag
  }) : null), subtitle ? /*#__PURE__*/React.createElement("div", {
    className: style.subtitle
  }, subtitle) : null), dataColumnsView), /*#__PURE__*/React.createElement("div", {
    className: style.settings
  }, tagsView, selected ? /*#__PURE__*/React.createElement(FaIcon, {
    iconName: "circle-check",
    iconColor: primarySelectedColor,
    backgroundColor: COLORS.white,
    size: {
      faSize: 16,
      wrapperSize: 16
    }
  }) : null, buttonLink ? /*#__PURE__*/React.createElement(ButtonLink, buttonLink) : null, secondButtonLink ? /*#__PURE__*/React.createElement(ButtonLink, secondButtonLink) : null, !_isEmpty(bulletPointMenuButton) ? /*#__PURE__*/React.createElement(BulletPointMenuButton, _extends({}, bulletPointMenuButton, {
    "data-name": `bullet-point-menu-button-${extractedIndex}`
  })) : null));
};
ListItem.contextTypes = {
  skin: Provider.childContextTypes.skin,
  translate: Provider.childContextTypes.translate
};
ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.string.isRequired,
  subtitle: PropTypes.string,
  'data-name': PropTypes.string,
  provider: PropTypes.shape({
    label: PropTypes.string,
    type: PropTypes.oneOf(['info', 'default', 'success', 'failure', 'warning', 'progress'])
  }),
  selected: PropTypes.bool,
  selectedColor: PropTypes.string,
  dataColumns: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
    type: PropTypes.oneOf(['success', 'failure', 'warning', 'progress', 'default']),
    className: PropTypes.oneOf(['cell', 'title'])
  })),
  buttonLink: PropTypes.shape({
    type: PropTypes.string,
    label: PropTypes.string,
    ariaLabel: PropTypes.string,
    dataName: PropTypes.string,
    icon: PropTypes.shape({
      position: PropTypes.string,
      type: PropTypes.string
    }),
    onClick: PropTypes.func
  }),
  secondButtonLink: PropTypes.shape({
    type: PropTypes.string,
    label: PropTypes.string,
    ariaLabel: PropTypes.string,
    dataName: PropTypes.string,
    icon: PropTypes.shape({
      position: PropTypes.string,
      type: PropTypes.string
    }),
    onClick: PropTypes.func
  }),
  bulletPointMenuButton: PropTypes.shape({
    buttonAriaLabel: PropTypes.string,
    menuAriaLabel: PropTypes.string,
    buttons: PropTypes.arrayOf(PropTypes.shape({
      'data-name': PropTypes.string,
      label: PropTypes.string,
      type: PropTypes.string,
      onClick: PropTypes.func
    })),
    onClick: PropTypes.func
  }),
  tags: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
    type: PropTypes.oneOf(['success', 'failure', 'warning', 'progress', 'default'])
  })),
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
  isBulkStyle: PropTypes.bool,
  isOverflowHidden: PropTypes.bool,
  order: PropTypes.number,
  'aria-label': PropTypes.string,
  contentType: PropTypes.string,
  id: PropTypes.string,
  leftIcon: PropTypes.shape({
    iconName: PropTypes.string,
    iconColor: PropTypes.string,
    backgroundColor: PropTypes.string,
    borderRadius: PropTypes.string,
    preset: PropTypes.string,
    gradientBackground: PropTypes.bool,
    size: PropTypes.number,
    wrapperSize: PropTypes.number
  }),
  image: PropTypes.string,
  checkbox: PropTypes.shape(CheckboxWithTitle.propTypes)
} : {};
export default ListItem;
//# sourceMappingURL=index.js.map