import styled from "@emotion/styled";
import { component, mergeConfig } from "../../engines";
import { popupClasses, popupConfig } from "../Popup";
import { panelTokens, panelConfig } from "../Panel";
import { classes, privateTokens, tokens } from "./Drawer.tokens";
var mergedPanelConfig = mergeConfig(panelConfig);
var Panel = component(mergedPanelConfig);
var Popup = component(popupConfig);
var animationVariants = {
    right: {
        show: {
            start: 'translate(100%, -50%)',
            end: 'translate(0, -50%)'
        },
        hide: {
            start: 'translate(0, -50%)',
            end: 'translate(100%, -50%)'
        }
    },
    bottom: {
        show: {
            start: 'translate(-50%, 100%)',
            end: 'translate(-50%, 0)'
        },
        hide: {
            start: 'translate(-50%, 0)',
            end: 'translate(-50%, 100%)'
        }
    },
    left: {
        show: {
            start: 'translate(-100%, -50%)',
            end: 'translate(0, -50%)'
        },
        hide: {
            start: 'translate(0, -50%)',
            end: 'translate(-100%, -50%)'
        }
    },
    top: {
        show: {
            start: 'translate(-50%, -100%)',
            end: 'translate(-50%, 0)'
        },
        hide: {
            start: 'translate(-50%, 0)',
            end: 'translate(-50%, -100%)'
        }
    }
};
var templateAnimationStyle = function templateAnimationStyle(placement) {
    return "\n        &.".concat(classes["".concat(placement, "Placement")], " {\n            && .").concat(popupClasses.root, " {\n                animation: ").concat(placement, "ShowAnimation 0.2s forwards;\n            }\n\n            &&.").concat(popupClasses.endAnimation, " .").concat(popupClasses.root, " {\n                animation: ").concat(placement, "HideAnimation 0.2s forwards;\n            }\n\n            @keyframes ").concat(placement, "ShowAnimation {\n                0% {\n                    transform: ").concat(animationVariants[placement].show.start, ";\n                    opacity: 0;\n                }\n\n                100% {\n                    transform: ").concat(animationVariants[placement].show.end, ";\n                    opacity: 1;\n                }\n            }\n\n            @keyframes ").concat(placement, "HideAnimation {\n                0% {\n                    transform: ").concat(animationVariants[placement].hide.start, ";\n                    opacity: 1;\n                }\n\n                100% {\n                    transform: ").concat(animationVariants[placement].hide.end, ";\n                    opacity: 0;\n                }\n            }\n        }\n    ");
};
var getAnimationStyles = function getAnimationStyles() {
    return Object.keys(animationVariants).reduce(function(acc, placement) {
        acc += templateAnimationStyle(placement);
        return acc;
    }, '');
};
export var StyledPanel = /*#__PURE__*/ styled(Panel, {
    target: "encu7410",
    label: "StyledPanel"
})(panelTokens.closeColor, ":var(", tokens.closeIconColor, ");");
export var StyledPopup = /*#__PURE__*/ styled(Popup, {
    target: "encu7411",
    label: "StyledPopup"
})("&&.", classes.overlay, "{animation:fadeIn 0.2s forwards;scrollbar-gutter:stable;}&&.", popupClasses.endAnimation, " .", classes.overlay, "{animation:fadeOut 0.2s forwards;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes fadeOut{from{opacity:1;}to{opacity:0;}}&& .", popupClasses.root, ",&& .", popupClasses.root, " > div{width:", function(param) {
    var width = param.width;
    return width || 'auto';
}, ";height:", function(param) {
    var height = param.height;
    return height || 'auto';
}, ";}", getAnimationStyles(), "    &.", classes.enterCustomAnimation, "{&& .", popupClasses.root, "{animation:", function(param) {
    var drawerAnimationInfo = param.drawerAnimationInfo;
    return (drawerAnimationInfo === null || drawerAnimationInfo === void 0 ? void 0 : drawerAnimationInfo.enter) || "var(".concat(privateTokens.enterAnimation, ")");
}, ";}}&.", classes.exitCustomAnimation, "{&&.", popupClasses.endAnimation, " .", popupClasses.root, "{animation:", function(param) {
    var drawerAnimationInfo = param.drawerAnimationInfo;
    return (drawerAnimationInfo === null || drawerAnimationInfo === void 0 ? void 0 : drawerAnimationInfo.exit) || "var(".concat(privateTokens.exitAnimation, ")");
}, ";}}");
