import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import classnames from 'classnames';
import SubjectIcon from '../subject-icons/SubjectIcon';
import Icon from '../icons/Icon';
import Checkbox from '../form-elements/checkbox/Checkbox';
import Text from '../text/Text';
var SelectMenuOption = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var option = _ref.option,
      isSelected = _ref.isSelected,
      _ref$withIcon = _ref.withIcon,
      withIcon = _ref$withIcon === void 0 ? false : _ref$withIcon,
      _ref$multiSelect = _ref.multiSelect,
      multiSelect = _ref$multiSelect === void 0 ? false : _ref$multiSelect,
      interactions = _ref.interactions,
      tabIndex = _ref.tabIndex;

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      isHovered = _React$useState2[0],
      setIsHovered = _React$useState2[1];

  var value = option.value,
      label = option.label,
      icon = option.icon;
  var classNames = classnames('sg-select-menu__option', {
    'sg-select-menu__option--selected': isSelected,
    'sg-select-menu__option--with-icon': withIcon,
    'sg-select-menu__option--multi-select': multiSelect
  });
  var displayedIcon = React.useMemo(function () {
    var _ref2 = icon || {},
        name = _ref2.name,
        _ref2$isSubjectIcon = _ref2.isSubjectIcon,
        isSubjectIcon = _ref2$isSubjectIcon === void 0 ? false : _ref2$isSubjectIcon;

    if (!withIcon || withIcon && !name) return null;

    if (isSubjectIcon) {
      var subjectIconName = name;
      return /*#__PURE__*/React.createElement(SubjectIcon, {
        size: "small",
        monoColor: isSelected || isHovered ? null : 'icon-gray-50',
        type: subjectIconName
      });
    } else {
      var regularIconName = name;
      return /*#__PURE__*/React.createElement(Icon, {
        size: 24,
        color: isSelected || isHovered ? 'icon-black' : 'icon-gray-50',
        type: regularIconName
      });
    }
  }, [isSelected, isHovered, withIcon, icon]);
  var optionState = React.useMemo(function () {
    var optionState;

    if (multiSelect) {
      optionState = /*#__PURE__*/React.createElement(Checkbox, {
        id: option.value,
        checked: isSelected
      });
    } else if (isSelected) {
      optionState = /*#__PURE__*/React.createElement(Icon, {
        type: "check",
        size: 24,
        color: "icon-black"
      });
    }

    return /*#__PURE__*/React.createElement("div", {
      className: "sg-select-menu__option-state",
      "aria-hidden": true
    }, optionState);
  }, [isSelected, multiSelect, option.value]);
  return /*#__PURE__*/React.createElement("div", _extends({
    key: value,
    ref: ref,
    className: classNames,
    role: "option",
    "aria-selected": isSelected,
    tabIndex: tabIndex
  }, interactions, {
    onMouseEnter: function onMouseEnter() {
      return setIsHovered(true);
    },
    onMouseLeave: function onMouseLeave() {
      return setIsHovered(false);
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "sg-select-menu__option-label"
  }, displayedIcon, /*#__PURE__*/React.createElement(Text, {
    size: "small",
    weight: "bold",
    breakWords: true
  }, label)), optionState);
});
export default SelectMenuOption;