import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _excluded = ["children"];

var _templateObject, _templateObject2, _templateObject3;

import React from "react";
import styled from "../../styles/styled";
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: calc(100% - 29px); // 29px is the height of helper text\n  width: 100%;\n  left: 0;\n  padding: 16px 8px;\n  border-radius: 12px;\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);\n  box-sizing: border-box;\n  background-color: ", ";\n"])), function (props) {
  return props.theme.colors.white[500];
});
var List = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  overflow: auto;\n  max-height: 300px;\n"])));
var Item = styled.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  padding: 8px 16px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &[aria-selected=\"true\"] {\n    background-color: ", ";\n    outline: none;\n  }\n"])), function (props) {
  return props.theme.colors.neutral["700"];
}, function (props) {
  return props.theme.colors.primary[50];
}, function (props) {
  return props.theme.colors.primary[300];
});

var Listbox = function Listbox(_ref) {
  var children = _ref.children,
      props = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React.createElement(Container, _extends({
    role: "listbox"
  }, props), /*#__PURE__*/React.createElement(List, null, children));
};

export var ListItem = function ListItem(_ref2) {
  var children = _ref2.children,
      onClick = _ref2.onClick,
      selected = _ref2.selected,
      id = _ref2.id;
  return /*#__PURE__*/React.createElement(Item, {
    role: "option",
    "aria-selected": selected,
    onClick: onClick,
    id: id
  }, children);
};
export default Listbox;