import { extends as _extends, objectWithoutProperties as _objectWithoutProperties } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import React__default from 'react';
import { MdSearch, MdArrowDropDown, MdDone } from 'react-icons/md';
import { visuallyHiddenCss } from '../../stylesheets/a11y.esm.js';
import { warn } from '../../utils/maintenance/warn.esm.js';
import '../../../node_modules/@reach/utils/dist/utils.esm.esm.js';
import { Combobox as Combobox$1, ComboboxInput as ComboboxInput$1, ComboboxPopover as ComboboxPopover$1, ComboboxList as ComboboxList$1, ComboboxOption as ComboboxOption$1, ComboboxOptionText as ComboboxOptionText$1, ComboboxButton as ComboboxButton$1, useComboboxContext as useComboboxContext$1 } from '../../../node_modules/@reach/combobox/dist/combobox.esm.esm.js';
import { comboboxCss, searchIconCss, inputCss, inputWithSelectedValueCss, inputWithToggleButtonCss, selectedValueCss, toggleButtonCss, popoverCss, listCss, optionCss, selectedOptionIconCss } from './Combobox.styles.esm.js';
import { DisableReachStyleCheck } from '../../utils/helpers/DisableReachStyleCheck.esm.js';

var ComboboxCustomContext = React__default.createContext({
  listRef: {
    current: null
  }
});

function useComboboxCustomContext() {
  return React__default.useContext(ComboboxCustomContext);
}

function Combobox(props) {
  var listRef = React__default.useRef(null);
  return jsx(ComboboxCustomContext.Provider, {
    value: {
      listRef: listRef
    }
  }, jsx(DisableReachStyleCheck, {
    reachComponent: "combobox"
  }), jsx(Combobox$1, _extends({
    openOnFocus: true,
    css: comboboxCss
  }, props)));
}
var ComboboxInput = React__default.forwardRef(function ComboboxInput(_ref, ref) {
  var selectedOptionLabel = _ref.selectedOptionLabel,
      hasError = _ref.hasError,
      showToggleButton = _ref.showToggleButton,
      _ref$toggleButtonAria = _ref.toggleButtonAriaLabel,
      toggleButtonAriaLabel = _ref$toggleButtonAria === void 0 ? "Show options" : _ref$toggleButtonAria,
      delegated = _objectWithoutProperties(_ref, ["selectedOptionLabel", "hasError", "showToggleButton", "toggleButtonAriaLabel"]);

  var _useComboboxCustomCon = useComboboxCustomContext(),
      listRef = _useComboboxCustomCon.listRef;
  /**
   * This handler allows to scroll list of options along with keyboard navigation
   *
   * This solution has been suggested in one of the replies:
   * https://github.com/reach/reach-ui/issues/357#issuecomment-575849548
   */


  var onKeyDown = function onKeyDown(event) {
    if (event.isDefaultPrevented()) {
      return;
    }

    var container = listRef.current;

    if (!container) {
      return;
    } // According to the original Github comment, using "requestAnimationFrame" makes
    // scrolling work when navigating from last item to first item and vice versa


    window.requestAnimationFrame(function () {
      var element = container.querySelector("[aria-selected=true]");

      if (!element) {
        return;
      }

      var top = element.offsetTop - container.scrollTop;
      var bottom = container.scrollTop + container.clientHeight - (element.offsetTop + element.clientHeight);
      if (bottom < 0) container.scrollTop -= bottom;
      if (top < 0) container.scrollTop += top;
    });
  };

  var showSelectedOptionLabel = !!selectedOptionLabel;

  if (delegated.value === selectedOptionLabel) {
    showSelectedOptionLabel = false;
  }

  return jsx("div", {
    css: {
      position: "relative"
    }
  }, jsx(MdSearch, {
    css: searchIconCss,
    "aria-hidden": true
  }), jsx(ComboboxInput$1, _extends({
    ref: ref,
    selectOnClick: true,
    onKeyDown: onKeyDown,
    css: function css(theme) {
      return [inputCss(hasError)(theme), showSelectedOptionLabel && inputWithSelectedValueCss(theme), showToggleButton && inputWithToggleButtonCss(theme)];
    }
  }, delegated)), !!selectedOptionLabel && jsx("span", {
    "aria-hidden": true,
    css: selectedValueCss
  }, selectedOptionLabel), showToggleButton && jsx(ComboboxButton, {
    css: toggleButtonCss
  }, jsx("span", {
    css: visuallyHiddenCss
  }, toggleButtonAriaLabel), jsx(MdArrowDropDown, {
    "aria-hidden": true
  })));
});
var ComboboxPopover = React__default.forwardRef(function ComboboxPopover(props, ref) {
  return jsx(ComboboxPopover$1, _extends({
    ref: ref,
    portal: true,
    css: popoverCss
  }, props));
});
function ComboboxList(props) {
  var _useComboboxCustomCon2 = useComboboxCustomContext(),
      listRef = _useComboboxCustomCon2.listRef;

  if (process.env.NODE_ENV === "development") {
    var hasAccessibleName = Boolean(props["aria-label"] || props["aria-labelledby"]);

    if (!hasAccessibleName) {
      warn("<ComboboxList /> is missing one of the required props: \"aria-label\", \"aria-labelledby\"");
    }
  }

  return jsx(ComboboxList$1, _extends({
    ref: listRef,
    persistSelection: true,
    css: listCss
  }, props));
}
var ComboboxOption = React__default.forwardRef(function ComboboxOption(_ref2, ref) {
  var selected = _ref2.selected,
      _ref2$selectedAriaLab = _ref2.selectedAriaLabel,
      selectedAriaLabel = _ref2$selectedAriaLab === void 0 ? "currently selected:" : _ref2$selectedAriaLab,
      _ref2$highlightMatche = _ref2.highlightMatches,
      highlightMatches = _ref2$highlightMatche === void 0 ? true : _ref2$highlightMatche,
      value = _ref2.value,
      children = _ref2.children,
      delegated = _objectWithoutProperties(_ref2, ["selected", "selectedAriaLabel", "highlightMatches", "value", "children"]);

  return jsx(ComboboxOption$1, _extends({
    ref: ref,
    value: value,
    css: optionCss(highlightMatches)
  }, delegated), selected && jsx(MdDone, {
    css: selectedOptionIconCss,
    "aria-label": selectedAriaLabel
  }), children || (highlightMatches ? jsx(ComboboxOptionText, null) : value));
});
function ComboboxOptionText(props) {
  return jsx(ComboboxOptionText$1, props);
}
function ComboboxButton(props) {
  // According to WAI-ARIA authoring practices, combobox button should be excluded from the tab sequence
  // https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-6
  return jsx(ComboboxButton$1, _extends({
    tabIndex: -1
  }, props, {
    type: "button"
  }));
}
function useComboboxContext() {
  return useComboboxContext$1();
}
Combobox.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Combobox"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Combobox/Combobox.tsx"] = {
    name: "Combobox",
    docgenInfo: Combobox.__docgenInfo,
    path: "src/components/Combobox/Combobox.tsx"
  };
}

ComboboxInput.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ComboboxInput",
  "props": {
    "toggleButtonAriaLabel": {
      "defaultValue": {
        "value": "\"Show options\"",
        "computed": false
      },
      "required": false
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Combobox/Combobox.tsx"] = {
    name: "ComboboxInput",
    docgenInfo: ComboboxInput.__docgenInfo,
    path: "src/components/Combobox/Combobox.tsx"
  };
}

ComboboxPopover.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ComboboxPopover"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Combobox/Combobox.tsx"] = {
    name: "ComboboxPopover",
    docgenInfo: ComboboxPopover.__docgenInfo,
    path: "src/components/Combobox/Combobox.tsx"
  };
}

ComboboxList.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ComboboxList"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Combobox/Combobox.tsx"] = {
    name: "ComboboxList",
    docgenInfo: ComboboxList.__docgenInfo,
    path: "src/components/Combobox/Combobox.tsx"
  };
}

ComboboxOption.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ComboboxOption",
  "props": {
    "selectedAriaLabel": {
      "defaultValue": {
        "value": "\"currently selected:\"",
        "computed": false
      },
      "required": false
    },
    "highlightMatches": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "required": false
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Combobox/Combobox.tsx"] = {
    name: "ComboboxOption",
    docgenInfo: ComboboxOption.__docgenInfo,
    path: "src/components/Combobox/Combobox.tsx"
  };
}

ComboboxOptionText.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ComboboxOptionText"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Combobox/Combobox.tsx"] = {
    name: "ComboboxOptionText",
    docgenInfo: ComboboxOptionText.__docgenInfo,
    path: "src/components/Combobox/Combobox.tsx"
  };
}

ComboboxButton.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ComboboxButton"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Combobox/Combobox.tsx"] = {
    name: "ComboboxButton",
    docgenInfo: ComboboxButton.__docgenInfo,
    path: "src/components/Combobox/Combobox.tsx"
  };
}

export { Combobox, ComboboxButton, ComboboxInput, ComboboxList, ComboboxOption, ComboboxOptionText, ComboboxPopover, useComboboxContext };
//# sourceMappingURL=Combobox.esm.js.map
