var _excluded = ["hoverable"],
  _excluded2 = ["children", "isDragging"];
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import { Check, Clear as ClearIcon, Grip } from '@procore/core-icons';
import React from 'react';
import { Draggable } from 'react-beautiful-dnd';
import { FakeCheckbox } from '../Checkbox/Checkbox';
import { Spinner } from '../Spinner/Spinner';
import { Token } from '../Token/Token';
import { Tooltip } from '../Tooltip/Tooltip';
import { Typeahead } from '../Typeahead/Typeahead';
import { OverflowObserver } from '../_hooks/OverflowObserver';
import { colors } from '../_styles/colors';
import { InternalDragDropContext } from './SuperSelect';
import { draggableOptionIdSymbol } from './SuperSelect.constants';
import { StyledArrow, StyledArrowContainer, StyledArrowFill, StyledArrowOutline, StyledCheckboxContainer, StyledCheckmarkContainer, StyledClearIcon, StyledDraggableWrapper, StyledEmptyMessage, StyledFooter, StyledGrip, StyledGroup, StyledHeader, StyledIndicators, StyledItem, StyledItemLabel, StyledLabel, StyledMultiInput, StyledMultiInputContainer, StyledMultiValue, StyledMultiValueContainer, StyledOptionGroupLabel, StyledOptions, StyledOverlay, StyledSearchContainer, StyledTrigger } from './SuperSelect.styles';
import { useSuperSelectContext } from './useSuperSelect';
export var Overlay = /*#__PURE__*/React.forwardRef(function (props, ref) {
  return /*#__PURE__*/React.createElement(StyledOverlay, _extends({
    ref: ref
  }, props));
});
export var SingleTrigger = function SingleTrigger(props) {
  var ctx = useSuperSelectContext();
  return /*#__PURE__*/React.createElement(OverflowObserver, null, function (_ref) {
    var isOverflowingX = _ref.isOverflowingX,
      ref = _ref.ref;
    var showTooltip = !ctx.config.disabled && isOverflowingX && !ctx.state.open;
    var label = ctx.state.selectedLabel || ctx.config.placeholder;
    var labelComponent = /*#__PURE__*/React.createElement(ctx.components.Label, _extends({}, props, {
      ref: ref,
      hoverable: showTooltip
    }));
    return /*#__PURE__*/React.createElement(Tooltip, {
      trigger: showTooltip ? 'hover' : 'none',
      overlay: label
    }, labelComponent);
  });
};
export var MultiTrigger = function MultiTrigger(props) {
  var ctx = useSuperSelectContext();
  if (ctx.config.multiple && Array.isArray(ctx.state.value)) {
    var _ctx$state$value;
    return /*#__PURE__*/React.createElement(ctx.components.MultiValueContainer, props, (_ctx$state$value = ctx.state.value) === null || _ctx$state$value === void 0 ? void 0 : _ctx$state$value.map(function (val, j) {
      var option = ctx.state.sourceOptions.find(function (o) {
        return ctx.option.value(o) === val;
      });
      return option && /*#__PURE__*/React.createElement(ctx.components.MultiValue, {
        key: val,
        index: j,
        option: option
      });
    }), /*#__PURE__*/React.createElement(ctx.components.MultiInputContainer, null, /*#__PURE__*/React.createElement(ctx.components.MultiInput, ctx.props.multiInput())));
  }
  return null;
};
export var TriggerContainer = StyledTrigger;
export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var ctx = useSuperSelectContext();
  var searchRef = React.useRef(null);
  React.useEffect(function () {
    var _searchRef$current;
    (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.focus();
  }, [ctx.state.value]);
  return /*#__PURE__*/React.createElement(ctx.components.TriggerContainer, _extends({
    ref: ref
  }, props), ctx.config.multiple ? /*#__PURE__*/React.createElement(ctx.components.MultiTrigger, null) : /*#__PURE__*/React.createElement(ctx.components.SingleTrigger, null), /*#__PURE__*/React.createElement(ctx.components.Indicators, null));
});
export var Indicators = function Indicators(props) {
  var ctx = useSuperSelectContext();
  var hasValue = Array.isArray(ctx.state.value) ? ctx.state.value.length > 0 : ctx.state.value;
  return /*#__PURE__*/React.createElement(StyledIndicators, null, hasValue && /*#__PURE__*/React.createElement(ctx.components.Clear, null), ctx.config.loading ? /*#__PURE__*/React.createElement(ctx.components.Loading, null) : /*#__PURE__*/React.createElement(ctx.components.ArrowContainer, null, /*#__PURE__*/React.createElement(ctx.components.Arrow, {
    up: ctx.state.open,
    down: !ctx.state.open,
    width: 8,
    height: 4
  })));
};
export var Label = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
  var hoverable = _ref2.hoverable,
    props = _objectWithoutProperties(_ref2, _excluded);
  var ctx = useSuperSelectContext();
  return /*#__PURE__*/React.createElement(StyledLabel, _extends({}, props, ctx.props.label(), {
    ref: ref,
    $hoverable: hoverable
  }), ctx.state.selectedLabel || ctx.config.placeholder);
});
export var Loading = function Loading() {
  return /*#__PURE__*/React.createElement(Spinner, {
    color: "blue50",
    size: "xs"
  });
};
export var ArrowContainer = function ArrowContainer(props) {
  return /*#__PURE__*/React.createElement(StyledArrowContainer, props);
};
export var Arrow = function Arrow(_ref3) {
  var up = _ref3.up,
    down = _ref3.down,
    left = _ref3.left,
    right = _ref3.right,
    _ref3$width = _ref3.width,
    width = _ref3$width === void 0 ? 12 : _ref3$width,
    _ref3$height = _ref3.height,
    height = _ref3$height === void 0 ? 12 : _ref3$height,
    _ref3$border = _ref3.border,
    border = _ref3$border === void 0 ? 0 : _ref3$border;
  var outline = '';
  var fill = '';
  if (up) {
    outline = "0,".concat(height, " ").concat(width, ",").concat(height, " {width / 2},0");
    // prettier-ignore
    fill = "".concat(border, ",").concat(height, " ").concat(width - border, ",").concat(height, " ").concat(width / 2, ",").concat(border * 2);
  } else if (down) {
    outline = "0,0 ".concat(width, ",0 ").concat(width / 2, ",").concat(height);
    // prettier-ignore
    fill = "".concat(border, ",0 ").concat(width - border, ",0 ").concat(width / 2, ",").concat(height - border * 2);
  } else if (left) {
    outline = "".concat(width, ",0 ").concat(width, ",").concat(height, " 0,").concat(height / 2);
    // prettier-ignore
    fill = "".concat(width, ",").concat(border, " ").concat(width, ",").concat(height - border, " ").concat(border * 2, ",").concat(height / 2);
  } else if (right) {
    outline = "0,0 0,".concat(height, " ").concat(width, ",").concat(height / 2);
    // prettier-ignore
    fill = "0,".concat(border, " 0,").concat(height - border, " ").concat(width - border * 2, ",").concat(height / 2);
  }
  return /*#__PURE__*/React.createElement(StyledArrow, null, /*#__PURE__*/React.createElement("svg", {
    height: height,
    width: width,
    focusable: "false"
  }, border > 0 && /*#__PURE__*/React.createElement(StyledArrowOutline, {
    points: outline
  }), /*#__PURE__*/React.createElement(StyledArrowFill, {
    points: fill
  })));
};
export var Clear = function Clear() {
  var ctx = useSuperSelectContext();
  return /*#__PURE__*/React.createElement(StyledClearIcon, _extends({}, ctx.props.clear(), {
    size: "sm",
    variant: "tertiary",
    disabled: ctx.config.disabled,
    icon: /*#__PURE__*/React.createElement(ClearIcon, null),
    tabIndex: -1 // TODO revisit this accessibility
  }));
};

export var MultiInputContainer = function MultiInputContainer(props) {
  return /*#__PURE__*/React.createElement(StyledMultiInputContainer, null, props.children);
};
export var MultiInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
  return /*#__PURE__*/React.createElement(StyledMultiInput, _extends({
    ref: ref
  }, props));
});
export var MultiValue = function MultiValue(props) {
  var ctx = useSuperSelectContext();
  return /*#__PURE__*/React.createElement(StyledMultiValue, null, /*#__PURE__*/React.createElement(Token, {
    focused: ctx.state.activeTokenIndex === props.index
  }, /*#__PURE__*/React.createElement(Token.Label, null, ctx.option.label(props.option)), /*#__PURE__*/React.createElement(Token.Remove, ctx.props.tokenClear(props.index))));
};
export var MultiValueContainer = function MultiValueContainer(props) {
  return /*#__PURE__*/React.createElement(StyledMultiValueContainer, props);
};
export var SearchContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
  return /*#__PURE__*/React.createElement(StyledSearchContainer, _extends({
    ref: ref
  }, props));
});
export var Search = function Search(props) {
  return /*#__PURE__*/React.createElement(Typeahead, props);
};
export var Header = function Header(props) {
  return /*#__PURE__*/React.createElement(StyledHeader, props);
};
export var Footer = /*#__PURE__*/React.forwardRef(function (props, ref) {
  return /*#__PURE__*/React.createElement(StyledFooter, _extends({
    ref: ref
  }, props, {
    padding: "md lg"
  }));
});
export var EmptyMessage = function EmptyMessage(props) {
  return /*#__PURE__*/React.createElement(StyledEmptyMessage, props, props.emptyMessage);
};
export var Options = function Options(props) {
  var ctx = useSuperSelectContext();
  return /*#__PURE__*/React.createElement(StyledOptions, _extends({}, props, ctx.props.menu()));
};
export var Group = function Group(props) {
  var ctx = useSuperSelectContext();
  return /*#__PURE__*/React.createElement(StyledGroup, _extends({}, props, ctx.props.item(), {
    role: "separator",
    "aria-disabled": true
  }));
};
export var Item = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
  var _props$dataKnownSiz;
  var children = _ref4.children,
    _ref4$isDragging = _ref4.isDragging,
    isDragging = _ref4$isDragging === void 0 ? false : _ref4$isDragging,
    props = _objectWithoutProperties(_ref4, _excluded2);
  var ctx = useSuperSelectContext();
  var _React$useContext = React.useContext(InternalDragDropContext),
    isDraggingOver = _React$useContext.isDraggingOver;
  var _React$useState = React.useState(0),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    size = _React$useState2[0],
    setSize = _React$useState2[1];
  var knownSize = (_props$dataKnownSiz = props['data-known-size']) !== null && _props$dataKnownSiz !== void 0 ? _props$dataKnownSiz : 0;
  React.useEffect(function () {
    setSize(function (prevSize) {
      return knownSize === 0 ? prevSize : knownSize;
    });
  }, [knownSize]);
  var index = props['data-index'];
  var option = ctx.state.options[index];
  if (!option) {
    return null;
  }
  var isDisabled = ctx.option.isDisabled(option);
  var isSelected = ctx.option.isSelected(option);
  var isOptgroup = ctx.option.isOptgroup(option);
  var value = ctx === null || ctx === void 0 ? void 0 : ctx.option.value(option);
  function setNode(node) {
    if (ctx) {
      ctx.refs.navigationList.current[index] = node;
    }
  }
  if (isOptgroup) {
    return /*#__PURE__*/React.createElement(ctx.components.Group, props, children);
  }
  return /*#__PURE__*/React.createElement(StyledItem, _extends({}, props, ctx.props.item({
    onClick: function onClick() {
      return ctx.state.onSelect(option);
    }
  }), {
    $disabled: ctx.option.isDisabled(option),
    $emptyMinHeight: size,
    $highlighted: ctx.state.activeMenuIndex === index,
    $isDraggable: !isDisabled,
    $isDragging: isDragging,
    $isDraggingDisabled: Boolean(ctx.state.searchValue),
    $isDraggingOver: isDraggingOver,
    $selected: isSelected,
    "aria-posinset": index + 1,
    "aria-selected": ctx.state.activeMenuIndex === index,
    "aria-setsize": ctx.state.options.length || 0,
    id: "item-".concat(value),
    ref: setNode,
    role: "option"
  }), ctx.config.selectionStyle === 'checkbox' && /*#__PURE__*/React.createElement(ctx.components.CheckboxContainer, null, /*#__PURE__*/React.createElement(ctx.components.Checkbox, {
    disabled: isDisabled,
    checked: isSelected
  })), children, ctx.config.selectionStyle === 'checkmark' && /*#__PURE__*/React.createElement(ctx.components.CheckmarkContainer, null, isSelected && /*#__PURE__*/React.createElement(ctx.components.Checkmark, null)));
});
export var OptionGroupHeader = function OptionGroupHeader(_ref5) {
  var optgroup = _ref5.optgroup;
  return /*#__PURE__*/React.createElement(StyledOptionGroupLabel, null, optgroup.label);
};
export var OptionLabel = function OptionLabel(_ref6) {
  var option = _ref6.option;
  var ctx = useSuperSelectContext();
  return /*#__PURE__*/React.createElement(StyledItemLabel, {
    $draggable: ctx.config.draggable
  }, ctx.option.label(option));
};
export var OptionContent = function OptionContent(_ref7) {
  var option = _ref7.option;
  var ctx = useSuperSelectContext();
  if (ctx.option.isOptgroup(option)) {
    return /*#__PURE__*/React.createElement(ctx.components.OptionGroupHeader, {
      optgroup: option
    });
  }
  return /*#__PURE__*/React.createElement(ctx.components.OptionLabel, {
    option: option
  });
};
export var DraggableOptionContent = function DraggableOptionContent(_ref8) {
  var index = _ref8.index,
    option = _ref8.option;
  var ctx = useSuperSelectContext();
  var disabled = ctx.option.isDisabled(option);
  var isOptgroup = ctx.option.isOptgroup(option);
  var optionId = isOptgroup ? option.id : option[draggableOptionIdSymbol];
  return /*#__PURE__*/React.createElement(Draggable, {
    draggableId: optionId,
    index: index,
    key: optionId,
    isDragDisabled: isOptgroup || disabled || Boolean(ctx.state.searchValue)
  }, function (provided) {
    return /*#__PURE__*/React.createElement(StyledDraggableWrapper, _extends({
      ref: provided.innerRef
    }, provided.draggableProps, provided.dragHandleProps), !isOptgroup && /*#__PURE__*/React.createElement(ctx.components.DragHandle, null), /*#__PURE__*/React.createElement(ctx.components.OptionContent, {
      index: index,
      option: option
    }));
  });
};
export var DragHandle = function DragHandle(props) {
  return /*#__PURE__*/React.createElement(StyledGrip, props, /*#__PURE__*/React.createElement(Grip, {
    color: colors.gray45
  }));
};
export var CheckboxContainer = function CheckboxContainer(props) {
  return /*#__PURE__*/React.createElement(StyledCheckboxContainer, props);
};
export var Checkbox = function Checkbox(props) {
  return /*#__PURE__*/React.createElement(FakeCheckbox, props);
};
export var CheckmarkContainer = function CheckmarkContainer(props) {
  return /*#__PURE__*/React.createElement(StyledCheckmarkContainer, props);
};
export var Checkmark = function Checkmark(props) {
  return /*#__PURE__*/React.createElement(Check, _extends({}, props, {
    size: "sm"
  }));
};
//# sourceMappingURL=SuperSelect.components.js.map