import _uniqueId from "lodash/fp/uniqueId";
import _isEmpty from "lodash/fp/isEmpty";
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Icon from '../../atom/icon';
import ToolTip from '../../atom/tooltip';
import Provider from '../../atom/provider';
import CatalogSection from '../../atom/catalog-section';
import style from './style.css';
const DisciplineAssociatedSkills = (props, context) => {
  const {
    translate
  } = context;
  const {
    skills = [],
    onSkillClick
  } = props;
  const AnchorElement = useCallback(skill => /*#__PURE__*/React.createElement("div", {
    className: style.chipFocusedContent
  }, skill.focused ? /*#__PURE__*/React.createElement(Icon, {
    iconName: "bullseye-arrow",
    size: {
      faSize: 12,
      wrapperSize: 12
    }
  }) : null, /*#__PURE__*/React.createElement("div", {
    className: style.chipFocusedContentText
  }, skill.locale)), []);
  const TooltipContentElement = useCallback(skill => /*#__PURE__*/React.createElement("div", {
    className: style.tooltipContentWrapper
  }, skill.focused ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, translate('skill_focused_chip_tooltip'))) : null, /*#__PURE__*/React.createElement("div", null, skill.locale)), [translate]);
  return !_isEmpty(skills) ? /*#__PURE__*/React.createElement("div", {
    "data-name": "discipline-associated-skills",
    className: style.associatedSkillsWrapper
  }, /*#__PURE__*/React.createElement(CatalogSection, {
    title: translate('associated_skills')
  }, /*#__PURE__*/React.createElement("div", {
    className: style.chipsWrapper
  }, skills.map(skill => {
    function handleSkillClick() {
      onSkillClick(skill.ref);
    }
    function handleAnchorElement() {
      return AnchorElement(skill);
    }
    function handleTooltipContentElement() {
      return TooltipContentElement(skill);
    }
    return /*#__PURE__*/React.createElement("div", {
      key: _uniqueId(),
      className: classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused),
      onClick: handleSkillClick
    }, /*#__PURE__*/React.createElement(ToolTip, {
      AnchorElement: handleAnchorElement,
      fontSize: 12,
      delayHide: 0,
      iconContainerClassName: style.infoIconTooltip,
      tooltipClassName: skill.focused ? style.tooltipSkillFocused : style.tooltip,
      TooltipContent: handleTooltipContentElement,
      closeToolTipInformationTextAriaLabel: translate('close_tooltip_information')
    }));
  })))) : null;
};
DisciplineAssociatedSkills.contextTypes = {
  translate: Provider.childContextTypes.translate
};
DisciplineAssociatedSkills.propTypes = process.env.NODE_ENV !== "production" ? {
  skills: PropTypes.arrayOf(PropTypes.shape({
    ref: PropTypes.string,
    locale: PropTypes.string,
    focused: PropTypes.bool
  })),
  onSkillClick: PropTypes.func
} : {};
export default DisciplineAssociatedSkills;
//# sourceMappingURL=index.js.map