"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;
    }
});
const _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
const _engines = require("../../engines");
const _Popup = require("../Popup");
const _Panel = require("../Panel");
const _Drawertokens = require("./Drawer.tokens");
function _interop_require_default(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
const mergedPanelConfig = (0, _engines.mergeConfig)(_Panel.panelConfig);
const Panel = (0, _engines.component)(mergedPanelConfig);
const Popup = (0, _engines.component)(_Popup.popupConfig);
const 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%)'
        }
    }
};
const templateAnimationStyle = (placement)=>`
        &.${_Drawertokens.classes[`${placement}Placement`]} {
            && .${_Popup.popupClasses.root} {
                animation: ${placement}ShowAnimation 0.2s forwards;
            }

            &&.${_Popup.popupClasses.endAnimation} .${_Popup.popupClasses.root} {
                animation: ${placement}HideAnimation 0.2s forwards;
            }

            @keyframes ${placement}ShowAnimation {
                0% {
                    transform: ${animationVariants[placement].show.start};
                    opacity: 0;
                }

                100% {
                    transform: ${animationVariants[placement].show.end};
                    opacity: 1;
                }
            }

            @keyframes ${placement}HideAnimation {
                0% {
                    transform: ${animationVariants[placement].hide.start};
                    opacity: 1;
                }

                100% {
                    transform: ${animationVariants[placement].hide.end};
                    opacity: 0;
                }
            }
        }
    `;
const getAnimationStyles = ()=>{
    return Object.keys(animationVariants).reduce((acc, placement)=>{
        acc += templateAnimationStyle(placement);
        return acc;
    }, '');
};
const StyledPanel = (0, _styledcomponents.default)(Panel).withConfig({
    displayName: "Drawer.styles__StyledPanel",
    componentId: "sc-758b0d76-0"
})([
    ``,
    `:var(`,
    `);`
], _Panel.panelTokens.closeColor, _Drawertokens.tokens.closeIconColor);
const 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, ({ width })=>width || 'auto', ({ height })=>height || 'auto', getAnimationStyles(), _Drawertokens.classes.enterCustomAnimation, _Popup.popupClasses.root, ({ drawerAnimationInfo })=>drawerAnimationInfo?.enter || `var(${_Drawertokens.privateTokens.enterAnimation})`, _Drawertokens.classes.exitCustomAnimation, _Popup.popupClasses.endAnimation, _Popup.popupClasses.root, ({ drawerAnimationInfo })=>drawerAnimationInfo?.exit || `var(${_Drawertokens.privateTokens.exitAnimation})`);
