import React__default, { useRef, useEffect } from 'react';
import '@emotion/core';
import { _ as __rest, a as __assign, b as __makeTemplateObject } from './_tslib-5c49bd3f.js';
import { jsxs, jsx } from '@emotion/react/jsx-runtime';
import '@emotion/styled';
import '@emotion/react';
import { s as styled } from './css-efbd0d2d.js';
import { u as useId } from './auto-id.esm-d84df351.js';
import { u as useCustomCss } from './utilities-357c56e6.js';

var MoreOptionsButton = function (_a) {
    var userProvidedId = _a.id, _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.openDirection, openDirection = _c === void 0 ? 'up' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'right' : _d, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, _f = _a.customCss, customCss = _f === void 0 ? '' : _f, _g = _a.iconSize, iconSize = _g === void 0 ? 30 : _g, children = _a.children, props = __rest(_a, ["id", "label", "openDirection", "iconPosition", "variant", "customCss", "iconSize", "children"]);
    var resolvedCss = useCustomCss(customCss);
    var id = useId(userProvidedId);
    var _h = React__default.useState(false), isOpen = _h[0], setIsOpen = _h[1];
    var buttonRef = React__default.useRef(null);
    var toggleOpen = function (menuButtonClicked) {
        if (menuButtonClicked) {
            setIsOpen(function (isOpen) { return !isOpen; });
        }
        else {
            setIsOpen(false);
        }
    };
    return (jsxs(MoreOptionsButtonHolder, __assign({ id: id, css: resolvedCss }, props, { className: "" + (isOpen ? 'opened' : '') }, { children: [jsx(MenuButton, __assign({ ref: buttonRef, className: "menu", onClick: function () { return toggleOpen(true); }, "aria-label": "Main Menu", "data-variant": variant || 'secondary' }, { children: jsxs(StyledTextDiv, { children: [iconPosition === 'left' && jsx(StyledLeftIconDiv, { children: jsx(MenuIcon, { children: jsx(MenuSvg, { svgSize: iconSize }, void 0) }, void 0) }, void 0), label && label, iconPosition === 'right' && jsx(StyledRightIconDiv, { children: jsx(MenuIcon, { children: jsx(MenuSvg, { svgSize: iconSize }, void 0) }, void 0) }, void 0)] }, void 0) }), void 0),
            jsx(ChildrenHolder, __assign({ openDirection: openDirection, isOpen: isOpen, iconSize: iconSize, onClickOutside: function () { return toggleOpen(false); } }, { children: children && children }), void 0)] }), void 0));
};
var MenuSvg = function (_a) {
    var svgSize = _a.svgSize;
    return (jsxs("svg", __assign({ width: svgSize, height: svgSize, viewBox: "0 0 100 100" }, { children: [jsx("path", { className: "line line1", d: "M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" }, void 0),
            jsx("path", { className: "line line2", d: "M 20,50 H 80" }, void 0),
            jsx("path", { className: "line line3", d: "M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" }, void 0)] }), void 0));
};
var MenuButton = styled('button')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  outline: none;\n  background-color: ", ";\n  border-radius: 8px;\n  color: #ffffff;\n  text-transform: uppercase;\n  font-weight: bold;\n  font-size: 16px;\n  display: flex;\n  align-items: center;\n  .line {\n    fill: none;\n    stroke: #fff;\n    stroke-width: 6;\n    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),\n      stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .line1 {\n    stroke-dasharray: 60 207;\n    stroke-width: 6;\n  }\n  .line2 {\n    stroke-dasharray: 60 60;\n    stroke-width: 6;\n  }\n  .line3 {\n    stroke-dasharray: 60 207;\n    stroke-width: 6;\n  }\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    background-color: #999999 !important;\n  }\n  &:focus-visible {\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:hover {\n    background-color: ", ";\n  }\n  &[data-variant='secondary'] {\n    background-color: ", ";\n    color: ", ";\n    .line {\n      stroke: ", ";\n    }\n    &:hover {\n      background-color: ", ";\n    }\n  }\n  &[data-variant='danger'] {\n    background-color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n  }\n  &[data-variant='success'] {\n    background-color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  border: none;\n  outline: none;\n  background-color: ", ";\n  border-radius: 8px;\n  color: #ffffff;\n  text-transform: uppercase;\n  font-weight: bold;\n  font-size: 16px;\n  display: flex;\n  align-items: center;\n  .line {\n    fill: none;\n    stroke: #fff;\n    stroke-width: 6;\n    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),\n      stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .line1 {\n    stroke-dasharray: 60 207;\n    stroke-width: 6;\n  }\n  .line2 {\n    stroke-dasharray: 60 60;\n    stroke-width: 6;\n  }\n  .line3 {\n    stroke-dasharray: 60 207;\n    stroke-width: 6;\n  }\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    background-color: #999999 !important;\n  }\n  &:focus-visible {\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:hover {\n    background-color: ", ";\n  }\n  &[data-variant='secondary'] {\n    background-color: ", ";\n    color: ", ";\n    .line {\n      stroke: ", ";\n    }\n    &:hover {\n      background-color: ",
    ";\n    }\n  }\n  &[data-variant='danger'] {\n    background-color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n  }\n  &[data-variant='success'] {\n    background-color: ", ";\n    &:hover {\n      background-color: ",
    ";\n    }\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten(theme.colors.primary, 4);
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.secondary;
}, function (_a) {
    var theme = _a.theme;
    return theme.darken(theme.colors.secondary, 47);
}, function (_a) {
    var theme = _a.theme;
    return theme.darken(theme.colors.secondary, 47);
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten(theme.colors.secondary, 4);
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.danger;
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten(theme.colors.danger, 4);
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.success;
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten(theme.colors.success, 4);
});
var StyledTextDiv = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: 10px;\n  padding-bottom: 10px;\n  padding-left: 13px;\n  padding-right: 15px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"], ["\n  padding-top: 10px;\n  padding-bottom: 10px;\n  padding-left: 13px;\n  padding-right: 15px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
var MenuIcon = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: transparent;\n  border: none;\n  display: flex;\n  padding: 0;\n"], ["\n  background-color: transparent;\n  border: none;\n  display: flex;\n  padding: 0;\n"])));
var ChildrenHolderWrapper = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: table;\n  transform-origin: ", ";;\n  transform: scale(", ");\n  font-size: ", ";\n  opacity: ", ";\n  overflow: hidden;\n  position: absolute;\n  left: 0;\n  top: ", ";\n  bottom: ", ";\n  transition-property: font-size, opacity, transform; \n  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  transition-duration: .3s;\n"], ["\n  display: table;\n  transform-origin: ", ";;\n  transform: scale(", ");\n  font-size: ", ";\n  opacity: ", ";\n  overflow: hidden;\n  position: absolute;\n  left: 0;\n  top: ", ";\n  bottom: ", ";\n  transition-property: font-size, opacity, transform; \n  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  transition-duration: .3s;\n"])), function (_a) {
    var openDirection = _a.openDirection;
    return openDirection === 'down' ? 'top' : 'bottom';
}, function (_a) {
    var isOpen = _a.isOpen;
    return isOpen ? '1' : '0';
}, function (_a) {
    var isOpen = _a.isOpen;
    return isOpen ? '1em' : '0';
}, function (_a) {
    var isOpen = _a.isOpen;
    return isOpen ? '1' : '0';
}, function (_a) {
    var openDirection = _a.openDirection, iconSize = _a.iconSize;
    return openDirection === 'down' ? iconSize + 16 + 'px' : 'unset';
}, function (_a) {
    var openDirection = _a.openDirection, iconSize = _a.iconSize;
    return openDirection === 'up' ? iconSize + 16 + 'px' : 'unset';
});
var ChildrenHolder = function (_a) {
    var openDirection = _a.openDirection, isOpen = _a.isOpen, iconSize = _a.iconSize, onClickOutside = _a.onClickOutside, children = _a.children;
    var ref = useRef(null);
    useEffect(function () {
        var handleClickOutside = function (event) {
            if (ref.current && ref.current.contains(event.target)) {
                // inside click
                return;
            }
            // outside click
            if (isOpen && onClickOutside) {
                onClickOutside(event);
            }
        };
        document.addEventListener('click', handleClickOutside);
        return function () {
            document.removeEventListener('click', handleClickOutside);
        };
    }, [onClickOutside, isOpen]);
    return (jsx(ChildrenHolderWrapper, __assign({ className: 'children-wrapper', openDirection: openDirection, isOpen: isOpen, iconSize: iconSize, ref: ref }, { children: children && children }), void 0));
};
var MoreOptionsButtonHolder = styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  padding: 4px 10px;\n  font-size: 16px;\n  flex-direction: row;\n  align-items: flex-start;\n  position: relative;\n  &.opened {\n    > button {  \n      .line1 {\n        stroke-dasharray: 90 207;\n        stroke-dashoffset: -134;\n        stroke-width: 6;\n      }\n      .line2 {\n        stroke-dasharray: 1 60;\n        stroke-dashoffset: -30;\n        stroke-width: 6;\n      }\n      .line3 {\n        stroke-dasharray: 90 207;\n        stroke-dashoffset: -134;\n        stroke-width: 6;\n      }\n    }\n  }\n"], ["\n  display: flex;\n  padding: 4px 10px;\n  font-size: 16px;\n  flex-direction: row;\n  align-items: flex-start;\n  position: relative;\n  &.opened {\n    > button {  \n      .line1 {\n        stroke-dasharray: 90 207;\n        stroke-dashoffset: -134;\n        stroke-width: 6;\n      }\n      .line2 {\n        stroke-dasharray: 1 60;\n        stroke-dashoffset: -30;\n        stroke-width: 6;\n      }\n      .line3 {\n        stroke-dasharray: 90 207;\n        stroke-dashoffset: -134;\n        stroke-width: 6;\n      }\n    }\n  }\n"])));
var StyledLeftIconDiv = styled('div')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding-right: 10px;\n"], ["\n  padding-right: 10px;\n"])));
var StyledRightIconDiv = styled('div')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-left: 10px;\n"], ["\n  padding-left: 10px;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

export { MoreOptionsButton };
//# sourceMappingURL=MoreOptionsButton.js.map
