"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
function _export(target, all) {
    for(var name in all)Object.defineProperty(target, name, {
        enumerable: true,
        get: Object.getOwnPropertyDescriptor(all, name).get
    });
}
_export(exports, {
    get StyledPanel () {
        return StyledPanel;
    },
    get StyledPopup () {
        return StyledPopup;
    }
});
var _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
var _engines = require("../../engines");
var _Popup = require("../Popup");
var _Panel = require("../Panel");
var _Drawertokens = require("./Drawer.tokens");
function _interop_require_default(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
var mergedPanelConfig = (0, _engines.mergeConfig)(_Panel.panelConfig);
var Panel = (0, _engines.component)(mergedPanelConfig);
var Popup = (0, _engines.component)(_Popup.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(_Drawertokens.classes["".concat(placement, "Placement")], " {\n            && .").concat(_Popup.popupClasses.root, " {\n                animation: ").concat(placement, "ShowAnimation 0.2s forwards;\n            }\n\n            &&.").concat(_Popup.popupClasses.endAnimation, " .").concat(_Popup.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;
    }, '');
};
var StyledPanel = (0, _styledcomponents.default)(Panel).withConfig({
    displayName: "Drawer.styles__StyledPanel",
    componentId: "sc-758b0d76-0"
})([
    "",
    ":var(",
    ");"
], _Panel.panelTokens.closeColor, _Drawertokens.tokens.closeIconColor);
var StyledPopup = (0, _styledcomponents.default)(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:",
    ";}}"
], _Drawertokens.classes.overlay, _Popup.popupClasses.endAnimation, _Drawertokens.classes.overlay, _Popup.popupClasses.root, _Popup.popupClasses.root, function(param) {
    var width = param.width;
    return width || 'auto';
}, function(param) {
    var height = param.height;
    return height || 'auto';
}, getAnimationStyles(), _Drawertokens.classes.enterCustomAnimation, _Popup.popupClasses.root, function(param) {
    var drawerAnimationInfo = param.drawerAnimationInfo;
    return (drawerAnimationInfo === null || drawerAnimationInfo === void 0 ? void 0 : drawerAnimationInfo.enter) || "var(".concat(_Drawertokens.privateTokens.enterAnimation, ")");
}, _Drawertokens.classes.exitCustomAnimation, _Popup.popupClasses.endAnimation, _Popup.popupClasses.root, function(param) {
    var drawerAnimationInfo = param.drawerAnimationInfo;
    return (drawerAnimationInfo === null || drawerAnimationInfo === void 0 ? void 0 : drawerAnimationInfo.exit) || "var(".concat(_Drawertokens.privateTokens.exitAnimation, ")");
});
