import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState } from 'react';
import { ButtonWrapper, OptionWrapper, ButtonOptionContainer, ButtonOptionWrapper, ButtonOptionLinkContentWrapper } from './style.js';
import OptionIcon from '../../Icons/OptionIcon/index.js';
import theme from '../../../Globals/theme.js';
import { ThemeProvider } from 'styled-components';
import globalStyle from '../../../Globals/global-styles.js';

var Button = function Button(_ref) {
  var children = _ref.children,
      type = _ref.type,
      disabled = _ref.disabled,
      hasOptions = _ref.hasOptions,
      items = _ref.items,
      displayLabel = _ref.displayLabel,
      size = _ref.size,
      _ref$bgColor = _ref.bgColor,
      bgColor = _ref$bgColor === void 0 ? theme.colourMaterialPrimary : _ref$bgColor,
      _ref$hoverBgColor = _ref.hoverBgColor,
      hoverBgColor = _ref$hoverBgColor === void 0 ? theme.colourBrandPrimary : _ref$hoverBgColor,
      _ref$hoverTextColor = _ref.hoverTextColor,
      hoverTextColor = _ref$hoverTextColor === void 0 ? theme.colourMaterialPrimary : _ref$hoverTextColor,
      _ref$textColor = _ref.textColor,
      textColor = _ref$textColor === void 0 ? theme.colourTextPrimary : _ref$textColor,
      onClick = _ref.onClick;

  var _useState = useState(""),
      _useState2 = _slicedToArray(_useState, 2),
      selectedOption = _useState2[0],
      setSelectedOption = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      showOverlay = _useState4[0],
      setOverlay = _useState4[1];

  var toggle = function toggle() {
    setOverlay(!showOverlay);
  };

  var select = function select(item) {
    setSelectedOption(item);
    setOverlay(!showOverlay);
  };

  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
    theme: theme
  }, /*#__PURE__*/React__default.createElement(globalStyle, null), hasOptions ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ButtonWrapper, {
    className: "".concat(type, " options"),
    disabled: disabled,
    size: size === "small" ? "37px" : "47px",
    onClick: toggle
  }, !selectedOption ? "Button" : selectedOption[displayLabel]), /*#__PURE__*/React__default.createElement(OptionWrapper, {
    className: "".concat(type, " option"),
    onClick: toggle
  }, /*#__PURE__*/React__default.createElement(OptionIcon, null)), showOverlay && /*#__PURE__*/React__default.createElement(ButtonOptionContainer, null, items.map(function (item, idx) {
    return /*#__PURE__*/React__default.createElement(ButtonOptionWrapper, {
      bgColor: bgColor,
      hoverTextColor: hoverTextColor,
      hoverBgColor: hoverBgColor,
      key: idx,
      onClick: function onClick() {
        return select(item);
      }
    }, /*#__PURE__*/React__default.createElement(ButtonOptionLinkContentWrapper, {
      href: item.path,
      target: "_blank",
      textColor: textColor
    }, item.icon, item[displayLabel]));
  }))) :
  /*#__PURE__*/
  // <ButtonComponent >
  React__default.createElement(ButtonWrapper, {
    className: type,
    size: size === "small" ? "37px" : "47px",
    bgColor: bgColor,
    hoverTextColor: hoverTextColor,
    hoverBgColor: hoverBgColor,
    disabled: disabled,
    onClick: onClick,
    textColor: textColor
  }, children) // </ButtonComponent>
  );
};

export { Button as default };
//# sourceMappingURL=index.js.map
