import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import { useRef } from 'react';
import _pt from 'prop-types';
import { MdKeyboardArrowDown } from 'react-icons/md';
import { Button } from '../Button/Button.esm.js';
import { positionRight } from '../../../node_modules/@reach/popover/dist/popover.esm.esm.js';
import { DropdownMenu, DropdownMenuButton, DropdownMenuPopover, DropdownMenuItemsLowLevel } from '../DropdownMenu/DropdownMenu.esm.js';
import { useIconButton } from '../IconButton/IconButton.esm.js';

var baseCss = function baseCss(_theme) {
  return {
    display: "inline-flex",
    alignItems: "center"
  };
};

var primaryButtonCss = function primaryButtonCss(_theme) {
  return {
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0,
    borderRightColor: "transparent"
  };
};

var separatorCss = function separatorCss(_theme) {
  return {
    display: "inline-block",
    width: 1,
    alignSelf: "stretch"
  };
};

function SplitButton(_ref) {
  var buttonLabel = _ref.buttonLabel,
      dropdownButtonLabel = _ref.dropdownButtonLabel,
      children = _ref.children,
      variant = _ref.variant,
      size = _ref.size,
      _ref$tone = _ref.tone,
      tone = _ref$tone === void 0 ? "BRAND" : _ref$tone,
      disabled = _ref.disabled,
      rest = _objectWithoutProperties(_ref, ["buttonLabel", "dropdownButtonLabel", "children", "variant", "size", "tone", "disabled"]);

  var containerRef = useRef(null);
  var iconButtonProps = useIconButton({
    icon: jsx(MdKeyboardArrowDown, null),
    children: dropdownButtonLabel,
    variant: variant,
    size: size,
    tone: tone
  });

  var finalIconButtonCss = function finalIconButtonCss(theme) {
    return [iconButtonProps.css(theme), {
      borderTopLeftRadius: 0,
      borderBottomLeftRadius: 0,
      flexShrink: 0
    }];
  };

  var finalSeparatorCss = function finalSeparatorCss(theme) {
    return [separatorCss(), variant === "PRIMARY" && {
      background: "\n        linear-gradient(".concat(theme.colors.whiteFade[30], " 0%, ").concat(theme.colors.whiteFade[30], " 100%),\n        linear-gradient(").concat(theme.tones[tone].dark, " 0%, ").concat(theme.tones[tone].dark, " 100%)")
    }, variant === "SECONDARY" && {
      backgroundColor: "transparent",
      borderTop: "1px solid ".concat(theme.tones[tone].light),
      borderBottom: "1px solid ".concat(theme.tones[tone].light)
    }];
  };

  var positionMenuPopover = function positionMenuPopover(targetRect, popoverRect) {
    return _objectSpread2({}, positionRight(targetRect, popoverRect), {
      minWidth: containerRef.current ? containerRef.current.clientWidth : "auto"
    });
  };

  return jsx("div", {
    ref: containerRef,
    css: baseCss
  }, jsx(Button, _extends({
    variant: variant,
    size: size,
    tone: tone,
    disabled: disabled,
    css: primaryButtonCss
  }, rest), buttonLabel), jsx("span", {
    css: finalSeparatorCss,
    "aria-hidden": true
  }), jsx(DropdownMenu, null, jsx(DropdownMenuButton, _extends({}, iconButtonProps, {
    css: finalIconButtonCss,
    disabled: disabled
  })), jsx(DropdownMenuPopover, {
    position: positionMenuPopover
  }, jsx(DropdownMenuItemsLowLevel, {
    size: "AUTO"
  }, children))));
}
SplitButton.propTypes = {
  buttonLabel: _pt.node.isRequired,
  dropdownButtonLabel: _pt.node.isRequired,
  children: _pt.node
};
SplitButton.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "SplitButton",
  "props": {
    "tone": {
      "defaultValue": {
        "value": "`BRAND`",
        "computed": false
      },
      "required": false
    },
    "buttonLabel": {
      "required": true,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "dropdownButtonLabel": {
      "required": true,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "children": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "variant": {
      "required": false,
      "tsType": {
        "name": "Exclude",
        "elements": [{
          "name": "ButtonVariant"
        }, {
          "name": "literal",
          "value": "\"GHOST\""
        }],
        "raw": "Exclude<ButtonVariant, \"GHOST\">"
      },
      "description": ""
    }
  }
};

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

export { SplitButton };
//# sourceMappingURL=SplitButton.esm.js.map
