import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import CloseIcon from "@ledgerhq/icons-ui/reactLegacy/CloseMedium";
import ArrowLeftIcon from "@ledgerhq/icons-ui/reactLegacy/ArrowLeftMedium";
import baseStyled from "../../styled";
import Flex from "../../layout/Flex";
import Button from "../../cta/Button";
import TransitionInOut from "../../transitions/TransitionInOut";
import TransitionScale from "../../transitions/TransitionScale";
const ICON_SIZE = 20;
const Wrapper = styled(Flex).attrs(p => ({
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "space-between",
    height: p.height || `${p.theme.sizes.drawer.popin.max.height}px`,
    width: p.width || `${p.theme.sizes.drawer.popin.max.width}px`,
    minHeight: `${p.theme.sizes.drawer.popin.min.height}px`,
    minWidth: `${p.theme.sizes.drawer.popin.min.width}px`,
    maxHeight: `${p.theme.sizes.drawer.popin.max.height}px`,
    maxWidth: `${p.theme.sizes.drawer.popin.max.width}px`,
    zIndex: p.theme.zIndexes[8],
    p: p.p !== undefined ? p.p : p.theme.space[10],
    rowGap: 6,
    backgroundColor: "background.main",
})) ``;
const Overlay = styled(Flex).attrs(p => ({
    justifyContent: "center",
    alignItems: "center",
    width: "100vw",
    height: "100vh",
    zIndex: p.theme.zIndexes[8],
    position: "fixed",
    top: 0,
    left: 0,
    backgroundColor: "constant.overlay",
})) ``;
const Header = baseStyled.section `
  display: grid;
  grid-template-columns: [icon] ${ICON_SIZE}px [title] 1fr [icon] ${ICON_SIZE}px;
  column-gap: 12px;
`;
const HeaderTitleContainer = styled(Flex).attrs(() => ({
    justifyContent: "center",
})) ``;
const PopinBody = baseStyled(Flex).attrs({
    as: "section",
    flexDirection: "column",
    flex: 1,
    overflow: "auto",
}) ``;
const PopinFooter = baseStyled(Flex).attrs({ as: "section" }) ``;
const IconContainer = styled(Button.Unstyled) `
  display: flex;
  align-items: center;
`;
const PopinHeader = ({ children, onClose, onBack, ...props }) => (React.createElement(Header, { ...props },
    React.createElement(Flex, null, onBack ? (React.createElement(IconContainer, { onClick: onBack },
        React.createElement(ArrowLeftIcon, { size: ICON_SIZE, color: "neutral.c100" }))) : null),
    React.createElement(HeaderTitleContainer, null, children),
    React.createElement(Flex, null, onClose ? (React.createElement(IconContainer, { onClick: onClose },
        React.createElement(CloseIcon, { size: ICON_SIZE, color: "neutral.c100" }))) : null)));
const Popin = ({ isOpen, children, width, height, ...props }) => (React.createElement(TransitionInOut, { in: isOpen, appear: true, mountOnEnter: true, unmountOnExit: true },
    React.createElement(Overlay, null,
        React.createElement(TransitionScale, { in: isOpen, appear: true },
            React.createElement(Wrapper, { width: width, height: height, ...props }, children)))));
const PopinWrapper = ({ children, menuPortalTarget, ...popinProps }) => {
    const $root = React.useMemo(() => menuPortalTarget === undefined && typeof document !== "undefined"
        ? document.querySelector("body")
        : menuPortalTarget, [menuPortalTarget]);
    if (!$root) {
        return React.createElement(Popin, { ...popinProps }, children);
    }
    else {
        return ReactDOM.createPortal(React.createElement(Popin, { ...popinProps }, children), $root);
    }
};
PopinWrapper.Header = PopinHeader;
PopinWrapper.Body = PopinBody;
PopinWrapper.Footer = PopinFooter;
export default PopinWrapper;
//# sourceMappingURL=index.js.map