define(["require", "exports", "./Panel.types", "../../Styling"], function (require, exports, Panel_types_1, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    // TODO -Issue #5689: Comment in once Button is converted to mergeStyles
    // import { IStyleFunctionOrObject } from '../../Utilities';
    // import { IButtonStyles, IButtonStyleProps } from '../../Button';
    var GlobalClassNames = {
        root: 'ms-Panel',
        main: 'ms-Panel-main',
        commands: 'ms-Panel-commands',
        contentInner: 'ms-Panel-contentInner',
        scrollableContent: 'ms-Panel-scrollableContent',
        navigation: 'ms-Panel-navigation',
        closeButton: 'ms-Panel-closeButton ms-PanelAction-close',
        header: 'ms-Panel-header',
        headerText: 'ms-Panel-headerText',
        content: 'ms-Panel-content',
        footer: 'ms-Panel-footer',
        footerInner: 'ms-Panel-footerInner',
        isOpen: 'is-open',
        hasCloseButton: 'ms-Panel--hasCloseButton',
        smallFluid: 'ms-Panel--smFluid',
        smallFixedNear: 'ms-Panel--smLeft',
        smallFixedFar: 'ms-Panel--sm',
        medium: 'ms-Panel--md',
        large: 'ms-Panel--lg',
        largeFixed: 'ms-Panel--fixed',
        extraLarge: 'ms-Panel--xl',
        custom: 'ms-Panel--custom'
    };
    var panelSize = {
        width: {
            xs: '272px',
            sm: '340px',
            md: '643px',
            lg: '940px'
        },
        margin: {
            md: '48px',
            lg: '428px',
            xl: '176px'
        }
    };
    var commandBarHeight = '44px';
    var sharedPaddingStyles = {
        paddingLeft: '16px',
        paddingRight: '16px',
        selectors: (_a = {},
            _a['@media screen and (min-width: ' + Styling_1.ScreenWidthMinUhfMobile + 'px)'] = {
                paddingLeft: '32px',
                paddingRight: '32px'
            },
            _a['@media screen and (min-width: ' + Styling_1.ScreenWidthMinXXLarge + 'px)'] = {
                paddingLeft: '40px',
                paddingRight: '40px'
            },
            _a)
    };
    // // TODO -Issue #5689: Comment in once Button is converted to mergeStyles
    // function getIconButtonStyles(props: IPanelStyleProps): IStyleFunctionOrObject<IButtonStyleProps, IButtonStyles> {
    //   const { theme } = props;
    //   return () => ({
    //     root: {
    //       height: 'auto',
    //       width: '44px',
    //       color: theme.palette.neutralSecondary,
    //       fontSize: IconFontSizes.large
    //     },
    //     rootHovered: {
    //       color: theme.palette.neutralPrimary
    //     }
    //   });
    // }
    exports.getStyles = function (props) {
        var className = props.className, focusTrapZoneClassName = props.focusTrapZoneClassName, hasCloseButton = props.hasCloseButton, headerClassName = props.headerClassName, isAnimating = props.isAnimating, isFooterAtBottom = props.isFooterAtBottom, isFooterSticky = props.isFooterSticky, isOnRightSide = props.isOnRightSide, isOpen = props.isOpen, isHiddenOnDismiss = props.isHiddenOnDismiss, theme = props.theme, type = props.type;
        var palette = theme.palette;
        var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
        var isCustomPanel = type === Panel_types_1.PanelType.custom;
        var windowHeight = typeof window !== 'undefined' ? window.innerHeight : '100%';
        return {
            root: [
                classNames.root,
                theme.fonts.medium,
                isOpen && classNames.isOpen,
                hasCloseButton && classNames.hasCloseButton,
                {
                    pointerEvents: 'none',
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0
                },
                !isOpen &&
                    !isAnimating &&
                    isHiddenOnDismiss && {
                    visibility: 'hidden'
                },
                isCustomPanel && classNames.custom,
                className
            ],
            overlay: [
                {
                    pointerEvents: 'none',
                    opacity: 1,
                    cursor: 'pointer',
                    transition: "opacity " + Styling_1.AnimationVariables.durationValue3 + " " + Styling_1.AnimationVariables.easeFunction1
                },
                isOpen && {
                    cursor: 'pointer',
                    pointerEvents: 'auto'
                },
                isOpen && isAnimating && Styling_1.AnimationClassNames.fadeIn200,
                !isOpen && isAnimating && Styling_1.AnimationClassNames.fadeOut200
            ],
            hiddenPanel: [
                !isOpen &&
                    !isAnimating &&
                    isHiddenOnDismiss && {
                    visibility: 'hidden'
                }
            ],
            main: [
                classNames.main,
                {
                    backgroundColor: palette.white,
                    position: 'absolute',
                    right: 0,
                    width: '100%',
                    bottom: 0,
                    top: 0,
                    overflowX: 'hidden',
                    overflowY: 'auto',
                    WebkitOverflowScrolling: 'touch',
                    selectors: (_a = {},
                        _a['@media (min-width: ' + Styling_1.ScreenWidthMinMedium + 'px)'] = {
                            borderLeft: "1px solid " + palette.neutralLight,
                            borderRight: "1px solid " + palette.neutralLight,
                            pointerEvents: 'auto',
                            width: panelSize.width.sm,
                            boxShadow: '-30px 0px 30px -30px rgba(0,0,0,0.2)',
                            left: 'auto'
                        },
                        _a['$root &'] = [
                            isOpen && {
                                pointerEvents: 'auto'
                            },
                            type === Panel_types_1.PanelType.smallFluid && {
                                width: '100%'
                            },
                            type === Panel_types_1.PanelType.smallFixedNear && {
                                right: 'auto',
                                left: 0,
                                width: panelSize.width.xs,
                                boxShadow: '30px 0px 30px -30px rgba(0,0,0,0.2)'
                            },
                            type === Panel_types_1.PanelType.smallFixedFar && {
                                width: panelSize.width.xs,
                                selectors: (_b = {},
                                    _b['@media (min-width: ' + Styling_1.ScreenWidthMinMedium + 'px)'] = {
                                        width: panelSize.width.sm
                                    },
                                    _b)
                            },
                            type === Panel_types_1.PanelType.medium && {
                                selectors: (_c = {},
                                    _c['@media (min-width: ' + Styling_1.ScreenWidthMinUhfMobile + 'px)'] = {
                                        left: panelSize.margin.md,
                                        width: 'auto'
                                    },
                                    _c['@media (min-width: ' + Styling_1.ScreenWidthMinXLarge + 'px)'] = {
                                        left: 'auto',
                                        width: panelSize.width.md
                                    },
                                    _c)
                            },
                            (type === Panel_types_1.PanelType.large || type === Panel_types_1.PanelType.largeFixed) && {
                                selectors: (_d = {},
                                    _d['@media (min-width: ' + Styling_1.ScreenWidthMinUhfMobile + 'px)'] = {
                                        left: panelSize.margin.md,
                                        width: 'auto'
                                    },
                                    _d['@media (min-width: ' + Styling_1.ScreenWidthMinXXLarge + 'px)'] = {
                                        left: panelSize.margin.lg
                                    },
                                    _d)
                            },
                            type === Panel_types_1.PanelType.largeFixed && {
                                selectors: (_e = {},
                                    _e['@media (min-width: ' + Styling_1.ScreenWidthMinXXLarge + 'px)'] = {
                                        left: 'auto',
                                        width: panelSize.width.lg
                                    },
                                    _e)
                            },
                            type === Panel_types_1.PanelType.extraLarge && {
                                selectors: (_f = {},
                                    _f['@media (min-width: ' + Styling_1.ScreenWidthMinUhfMobile + 'px)'] = {
                                        left: panelSize.margin.md,
                                        width: 'auto'
                                    },
                                    _f['@media (min-width: ' + Styling_1.ScreenWidthMinXXLarge + 'px)'] = {
                                        left: panelSize.margin.xl
                                    },
                                    _f)
                            },
                            isCustomPanel && {
                                maxWidth: '100vw'
                            }
                        ],
                        _a)
                },
                {
                    display: 'flex',
                    flexDirection: 'column',
                    maxHeight: '100%',
                    selectors: (_g = {},
                        _g['@supports (-webkit-overflow-scrolling: touch)'] = {
                            maxHeight: windowHeight
                        },
                        _g)
                },
                isFooterAtBottom && {
                    height: '100%',
                    selectors: (_h = {},
                        _h['@supports (-webkit-overflow-scrolling: touch)'] = {
                            height: windowHeight
                        },
                        _h)
                },
                isOpen && isAnimating && !isOnRightSide && Styling_1.AnimationClassNames.slideRightIn40,
                isOpen && isAnimating && isOnRightSide && Styling_1.AnimationClassNames.slideLeftIn40,
                !isOpen && isAnimating && !isOnRightSide && Styling_1.AnimationClassNames.slideLeftOut40,
                !isOpen && isAnimating && isOnRightSide && Styling_1.AnimationClassNames.slideRightOut40,
                focusTrapZoneClassName
            ],
            commands: [classNames.commands],
            navigation: [
                classNames.navigation,
                {
                    padding: '0 5px',
                    height: commandBarHeight,
                    display: 'flex',
                    justifyContent: 'flex-end'
                }
            ],
            closeButton: [classNames.closeButton],
            contentInner: [
                classNames.contentInner,
                {
                    display: 'flex',
                    flexDirection: 'column',
                    maxHeight: '100%',
                    overflowY: 'hidden',
                    selectors: (_j = {},
                        _j['@supports (-webkit-overflow-scrolling: touch)'] = {
                            maxHeight: windowHeight
                        },
                        _j)
                },
                isFooterAtBottom && {
                    height: '100%',
                    selectors: (_k = {},
                        _k['@supports (-webkit-overflow-scrolling: touch)'] = {
                            height: windowHeight
                        },
                        _k)
                }
            ],
            header: [
                classNames.header,
                sharedPaddingStyles,
                {
                    margin: '14px 0',
                    // Ensure that title doesn't shrink if screen is too small
                    flexGrow: 0,
                    selectors: (_l = {},
                        _l['@media (min-width: ' + Styling_1.ScreenWidthMinXLarge + 'px)'] = {
                            marginTop: '30px'
                        },
                        _l)
                }
            ],
            headerText: [
                classNames.headerText,
                Styling_1.DefaultFontStyles.xLarge,
                {
                    color: palette.neutralPrimary,
                    lineHeight: '32px',
                    margin: 0
                },
                headerClassName
            ],
            scrollableContent: [
                classNames.scrollableContent,
                {
                    overflowY: 'auto',
                    height: '100%',
                    selectors: (_m = {},
                        _m['@supports (-webkit-overflow-scrolling: touch)'] = {
                            height: windowHeight
                        },
                        _m)
                }
            ],
            content: [
                classNames.content,
                sharedPaddingStyles,
                {
                    marginBottom: 0,
                    paddingBottom: 20
                }
            ],
            footer: [
                classNames.footer,
                {
                    // Ensure that footer doesn't shrink if screen is too small
                    flexGrow: 0,
                    borderTop: '1px solid transparent',
                    transition: "opacity " + Styling_1.AnimationVariables.durationValue3 + " " + Styling_1.AnimationVariables.easeFunction2
                },
                isFooterSticky && {
                    background: palette.white,
                    borderTopColor: palette.neutralLight
                }
            ],
            footerInner: [
                classNames.footerInner,
                sharedPaddingStyles,
                {
                    paddingBottom: '20px',
                    paddingTop: '20px'
                }
            ]
            // subComponentStyles: {
            //   iconButton: getIconButtonStyles(props)
            // }
        };
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
    };
    var _a;
});
//# sourceMappingURL=Panel.styles.js.map