import { Check } from '@procore/core-icons';
import React from 'react';
import { Pill } from '../../Pill/Pill';
import { PillSelectCheckedContainer } from '../../PillSelect/PillSelect.styles';
import { Tooltip } from '../../Tooltip/Tooltip';
import { OverflowObserver } from '../../_hooks/OverflowObserver';
import { Label } from '../SuperSelect.components';
import { PillSelectLabel, PillSelectLabelWrapper, PillSelectOptionWrapper, StyledLabel } from '../SuperSelect.styles';
import { useSuperSelectContext } from '../useSuperSelect';
export var pillPreset = {
  components: {
    Label: /*#__PURE__*/React.forwardRef(function (_ref, ref) {
      var hoverable = _ref.hoverable;
      var ctx = useSuperSelectContext();
      return /*#__PURE__*/React.createElement(StyledLabel, {
        $hoverable: hoverable
      }, /*#__PURE__*/React.createElement(PillSelectLabelWrapper, null, /*#__PURE__*/React.createElement(OverflowObserver, null, function (_ref2) {
        var _ctx$state$selectedOp;
        var isOverflowing = _ref2.isOverflowing,
          ref = _ref2.ref;
        return /*#__PURE__*/React.createElement(Tooltip, {
          trigger: isOverflowing ? 'hover' : 'none',
          overlay: ctx.state.selectedLabel
        }, ctx.state.isEmpty() ? /*#__PURE__*/React.createElement(Label, {
          ref: ref,
          hoverable: hoverable
        }) : /*#__PURE__*/React.createElement(PillSelectLabel, {
          ref: ref,
          color: (_ctx$state$selectedOp = ctx.state.selectedOption) === null || _ctx$state$selectedOp === void 0 ? void 0 : _ctx$state$selectedOp.color
        }, ctx.state.selectedLabel));
      })));
    }),
    OptionLabel: function OptionLabel(_ref3) {
      var option = _ref3.option;
      var ctx = useSuperSelectContext();
      return /*#__PURE__*/React.createElement(PillSelectOptionWrapper, null, /*#__PURE__*/React.createElement(Pill, {
        color: option.color
      }, ctx.option.label(option)), /*#__PURE__*/React.createElement(PillSelectCheckedContainer, null, ctx.option.isSelected(option) && /*#__PURE__*/React.createElement(Check, {
        size: "sm"
      })));
    },
    MultiValue: function MultiValue(_ref4) {
      var option = _ref4.option;
      var ctx = useSuperSelectContext();
      return /*#__PURE__*/React.createElement(Pill, {
        color: option.color
      }, ctx.option.label(option));
    }
  }
};
//# sourceMappingURL=pillPreset.js.map