var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useCallback } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import FlexBox from "../Flex";
import Divider from "../../asorted/Divider";
import Close from "@ledgerhq/icons-ui/reactLegacy/CloseMedium";
import ArrowLeft from "@ledgerhq/icons-ui/reactLegacy/ArrowLeftMedium";
import TransitionSlide from "../../transitions/TransitionSlide";
import TransitionInOut from "../../transitions/TransitionInOut";
import Text from "../../asorted/Text";
import Button from "../../cta/Button";
export var Direction;
(function (Direction) {
    Direction["Left"] = "left";
    Direction["Right"] = "right";
})(Direction || (Direction = {}));
const Container = styled(FlexBox) `
  width: 100%;
  height: 100%;
  flex-direction: column;
`;
const Wrapper = styled(FlexBox) `
  height: 100%;
  width: ${p => p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  z-index: ${p => p.theme.zIndexes[8]};
`;
const Overlay = styled.div `
  display: flex;
  position: fixed;
  justify-content: ${p => (p.direction === Direction.Left ? "flex-end" : "flex-start")};
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: ${p => p.theme.colors.constant.overlay};
`;
const ScrollWrapper = styled(FlexBox) `
  &::-webkit-scrollbar {
    display: none;
  }
`;
const ButtonPlaceholder = styled.div `
  min-width: ${p => p.theme.space[12]}px;
`;
const DrawerContent = React.forwardRef(({ isOpen, title, children, footer, big, onClose, backgroundColor, setTransitionsEnabled = () => 0, onBack, extraContainerProps, extraHeaderProps, extraFooterProps, extraFooterDividerProps, ignoreBackdropClick = false, hideNavigation = true, direction = Direction.Left, }, ref) => {
    const disableChildAnimations = useCallback(() => setTransitionsEnabled(false), [setTransitionsEnabled]);
    const enableChildAnimations = useCallback(() => setTransitionsEnabled(true), [setTransitionsEnabled]);
    const handleBackdropClick = useCallback(() => {
        if (!ignoreBackdropClick) {
            onClose();
        }
    }, [onClose, ignoreBackdropClick]);
    const stopClickPropagation = useCallback((e) => {
        e.stopPropagation();
    }, []);
    return (React.createElement(TransitionInOut, { in: isOpen, appear: true, mountOnEnter: true, unmountOnExit: true, onEntering: disableChildAnimations, onEntered: enableChildAnimations, onExiting: disableChildAnimations },
        React.createElement(Overlay, { direction: direction, onClick: handleBackdropClick, ref: ref },
            React.createElement(TransitionSlide, { in: isOpen, direction: direction, fixed: true, reverseExit: true, appear: true, mountOnEnter: true, unmountOnExit: true },
                React.createElement(Wrapper, { big: big, onClick: stopClickPropagation, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : "background.main" },
                    React.createElement(Container, null,
                        React.createElement(FlexBox, Object.assign({ justifyContent: "space-between", alignItems: "center", p: 12, pb: 10 }, extraHeaderProps),
                            !hideNavigation && (React.createElement(React.Fragment, null, onBack != null ? (React.createElement(Button, { variant: "neutral", onClick: onBack, Icon: ArrowLeft })) : (React.createElement(ButtonPlaceholder, null)))),
                            (React.createElement(Text, { variant: "h3", flex: 1, textAlign: "center" }, title)) || React.createElement("div", null),
                            React.createElement(FlexBox, { alignSelf: "flex-start" },
                                React.createElement(Button, { variant: "neutral", onClick: onClose, Icon: Close }))),
                        React.createElement(ScrollWrapper, Object.assign({ flexDirection: "column", alignItems: "stretch", overflow: "scroll", position: "relative", p: 12, pt: 0, flex: 1 }, extraContainerProps), children),
                        footer && (React.createElement(React.Fragment, null,
                            React.createElement(Divider, Object.assign({}, extraFooterDividerProps)),
                            React.createElement(FlexBox, Object.assign({ alignItems: "center", py: 8, px: 12 }, extraFooterProps), footer)))))))));
});
const Drawer = (_a, ref) => {
    var { children, menuPortalTarget } = _a, sideProps = __rest(_a, ["children", "menuPortalTarget"]);
    const $root = React.useMemo(() => menuPortalTarget === undefined && typeof document !== "undefined"
        ? document.querySelector("body")
        : menuPortalTarget, [menuPortalTarget]);
    if (!$root) {
        return (React.createElement(DrawerContent, Object.assign({ ref: ref }, sideProps), children));
    }
    else {
        return ReactDOM.createPortal(React.createElement(DrawerContent, Object.assign({ ref: ref }, sideProps), children), $root);
    }
};
export default React.forwardRef(Drawer);
//# sourceMappingURL=index.js.map