"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DropDown = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _Button = require("./Button");
var _reactTinyPopover = require("react-tiny-popover");
require("../styles/popover.css");
var DropDown = function DropDown(_ref) {
  var title = _ref.title,
    options = _ref.options,
    onSelect = _ref.onSelect;
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    open = _useState2[0],
    setOpen = _useState2[1];
  var _useState3 = (0, _react.useState)(null),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    selected = _useState4[0],
    setSelected = _useState4[1];
  var _useState5 = (0, _react.useState)(false),
    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
    isPopoverOpen = _useState6[0],
    setIsPopoverOpen = _useState6[1];
  return /*#__PURE__*/_react.default.createElement(_reactTinyPopover.Popover, {
    isOpen: isPopoverOpen,
    onClickOutside: function onClickOutside() {
      setIsPopoverOpen(false);
    },
    padding: 10,
    align: "start",
    positions: ['bottom', 'top', 'right'] // preferred positions by priority
    ,
    content: /*#__PURE__*/_react.default.createElement("div", {
      style: {
        width: 200
      },
      className: "popover"
    }, /*#__PURE__*/_react.default.createElement("label", {
      style: {
        marginBottom: 8
      }
    }, title), options.map(function (option) {
      return /*#__PURE__*/_react.default.createElement(_Button.Button, {
        appearance: "minimal",
        onClick: function onClick() {
          setSelected(option);
        },
        isActive: selected == option,
        isFullWidth: true,
        align: "start",
        style: {
          marginBottom: '0.7em'
        }
      }, option);
    }))
  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
    appearance: "secondary",
    isActive: open,
    onClick: function onClick() {
      setIsPopoverOpen(!isPopoverOpen);
    }
  }, selected || 'Select')));
};

// {selected == option && <Check />}
exports.DropDown = DropDown;