import styled from "styled-components";
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 = styled(Panel).withConfig({
    displayName: "Drawer.styles__StyledPanel",
    componentId: "sc-758b0d76-0"
})([
    "",
    ":var(",
    ");"
], panelTokens.closeColor, tokens.closeIconColor);
export var StyledPopup = styled(Popup).withConfig({
    displayName: "Drawer.styles__StyledPopup",
    componentId: "sc-758b0d76-1"
})([
    "&&.",
    "{animation:fadeIn 0.2s forwards;scrollbar-gutter:stable;}&&.",
    " .",
    "{animation:fadeOut 0.2s forwards;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes fadeOut{from{opacity:1;}to{opacity:0;}}&& .",
    ",&& .",
    " > div{width:",
    ";height:",
    ";}",
    " &.",
    "{&& .",
    "{animation:",
    ";}}&.",
    "{&&.",
    " .",
    "{animation:",
    ";}}"
], classes.overlay, popupClasses.endAnimation, classes.overlay, popupClasses.root, popupClasses.root, function(param) {
    var width = param.width;
    return width || 'auto';
}, function(param) {
    var height = param.height;
    return height || 'auto';
}, getAnimationStyles(), classes.enterCustomAnimation, popupClasses.root, 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, function(param) {
    var drawerAnimationInfo = param.drawerAnimationInfo;
    return (drawerAnimationInfo === null || drawerAnimationInfo === void 0 ? void 0 : drawerAnimationInfo.exit) || "var(".concat(privateTokens.exitAnimation, ")");
});
