import React, { useCallback, useMemo, useState } from 'react';
import { CssBaseline, lighten } from '@material-ui/core';
import { default as MuiThemeProvider } from '@material-ui/styles/esm/ThemeProvider';
import { createTheme } from '@material-ui/core/styles';
import { verticalPrimary, verticalSecondary } from '../style/verticalStyles';
import { useTypeScale } from '../style/verticalStyles';
import { greyScale } from '../style/verticalStyles';
import { useTenantStore } from '../../stores';
import { useRouteRegistry } from '../../routes/routeRegistryStore';
import { initializeTheme } from 'udp-react-stencil-component-library';
/**
 * Custom MUI theme provider
 */
export const ThemeProvider = ({ children }) => {
    var _a, _b;
    const [h1, h2, h3, h4, h5, h6, body1, body2, subtitle1, subtitle2, subtitle3, button, caption, caption2, overline] = useTypeScale();
    const [mode, setMode] = useState('light');
    const tenant = useTenantStore();
    const activeTenant = (_a = tenant === null || tenant === void 0 ? void 0 : tenant.currentTenant) !== null && _a !== void 0 ? _a : null;
    const tenantTheme = (_b = activeTenant === null || activeTenant === void 0 ? void 0 : activeTenant.theme) !== null && _b !== void 0 ? _b : null;
    const routeConfig = useRouteRegistry((state) => state.routeMap[state.currentPath]);
    const isThemeInitialized = Boolean(activeTenant === null || activeTenant === void 0 ? void 0 : activeTenant.tenantId);
    const resolvedTheme = ((routeConfig === null || routeConfig === void 0 ? void 0 : routeConfig.isPublic) === true && !tenantTheme ? 'sap' : tenantTheme !== null && tenantTheme !== void 0 ? tenantTheme : '').toLowerCase();
    const getThemeData = useCallback(() => {
        return { mode, currentTheme: tenantTheme !== null && tenantTheme !== void 0 ? tenantTheme : '' };
    }, [mode, tenantTheme]);
    const theme = useMemo(() => {
        const { augmentColor } = createTheme().palette;
        const primary = verticalPrimary(resolvedTheme);
        const secondary = verticalSecondary(resolvedTheme);
        //Set Fluent web component theme.
        initializeTheme({ primaryColor: primary, mode });
        const coreTheme = createTheme({
            palette: {
                type: mode,
                primary: {
                    main: primary,
                    light: lighten(primary, 0.8)
                },
                secondary: {
                    main: secondary
                },
                appBar: augmentColor({
                    main: '#021b38'
                }),
                background: {
                    default: greyScale(mode),
                    footer: '#021b38'
                }
            },
            dimensions: {
                drawerWidth: 200
            },
            typography: {
                fontFamily: [
                    // Webfont
                    // System font stack
                    // '-apple-system',
                    // 'BlinkMacSystemFont',
                    'Segoe UI',
                    'Roboto',
                    'Noto',
                    'Helvetica Neue',
                    'Helvetica',
                    'Ubuntu',
                    'Arial',
                    'sans-serif',
                    'Apple Color Emoji',
                    'Segoe UI Emoji',
                    'Segoe UI Symbol'
                ]
                    .map((item) => (item.includes(' ') ? `"${item}"` : item))
                    .join(', ')
            },
            mixins: {},
            props: {
                MuiTextField: {
                    margin: 'normal',
                    variant: 'filled',
                    fullWidth: true
                }
            }
        });
        const fullTheme = createTheme(Object.assign(Object.assign({}, coreTheme), { overrides: {
                MuiCssBaseline: {
                    '@global': {
                        '*, *::before, *::after': {
                            boxSizing: 'border-box'
                        },
                        '*::-webkit-scrollbar': {
                            height: 8,
                            width: 8,
                            backgroundColor: '#fff'
                        },
                        '*::-webkit-scrollbar-track': {
                            backgroundColor: '#fff'
                        },
                        '*::-webkit-scrollbar-track:hover': {
                            backgroundColor: '#f4f4f4'
                        },
                        '*::-webkit-scrollbar-thumb': {
                            backgroundColor: '#babac0',
                            borderRadius: 16,
                            border: '2px solid #fff'
                        },
                        '*::-webkit-scrollbar-thumb:hover': {
                            backgroundColor: '#a0a0a5',
                            border: '2px solid #f4f4f4'
                        }
                    }
                },
                MuiTypography: {
                    h1: {
                        fontSize: h1.size,
                        fontWeight: h1.weight,
                        lineHeight: h1.lineHeight,
                        letterSpacing: h1.letterSpacing
                    },
                    h2: {
                        fontSize: h2.size,
                        fontWeight: h2.weight,
                        lineHeight: h2.lineHeight,
                        letterSpacing: h2.letterSpacing
                    },
                    h3: {
                        fontSize: h3.size,
                        fontWeight: h3.weight,
                        lineHeight: h3.lineHeight,
                        letterSpacing: h3.letterSpacing
                    },
                    h4: {
                        fontSize: h4.size,
                        fontWeight: h4.weight,
                        lineHeight: h4.lineHeight,
                        letterSpacing: h4.letterSpacing
                    },
                    h5: {
                        fontSize: h5.size,
                        fontWeight: h5.weight,
                        lineHeight: h5.lineHeight,
                        letterSpacing: h5.letterSpacing
                    },
                    h6: {
                        fontSize: h6.size,
                        fontWeight: h6.weight,
                        lineHeight: h6.lineHeight,
                        letterSpacing: h6.letterSpacing
                    },
                    subtitle1: {
                        fontSize: subtitle1.size,
                        fontWeight: subtitle1.weight,
                        lineHeight: subtitle1.lineHeight,
                        letterSpacing: subtitle1.letterSpacing
                    },
                    subtitle2: {
                        fontSize: subtitle2.size,
                        fontWeight: subtitle2.weight,
                        lineHeight: subtitle2.lineHeight,
                        letterSpacing: subtitle2.letterSpacing
                    },
                    subtitle3: {
                        fontSize: subtitle3.size,
                        fontWeight: subtitle3.weight,
                        lineHeight: subtitle3.lineHeight,
                        letterSpacing: subtitle3.letterSpacing
                    },
                    body1: {
                        fontSize: body1.size,
                        fontWeight: body1.weight,
                        lineHeight: body1.lineHeight,
                        letterSpacing: body1.letterSpacing
                    },
                    body2: {
                        fontSize: body2.size,
                        fontWeight: body2.weight,
                        lineHeight: body2.lineHeight,
                        letterSpacing: body2.letterSpacing
                    },
                    button: {
                        fontSize: button.size,
                        fontWeight: button.weight,
                        lineHeight: button.lineHeight,
                        letterSpacing: button.letterSpacing
                    },
                    caption: {
                        fontSize: caption.size,
                        fontWeight: caption.weight,
                        lineHeight: caption.lineHeight,
                        letterSpacing: caption.letterSpacing
                    },
                    caption2: {
                        fontSize: caption2.size,
                        fontWeight: caption2.weight,
                        lineHeight: caption2.lineHeight,
                        letterSpacing: caption2.letterSpacing
                    },
                    overline: {
                        fontSize: overline.size,
                        fontWeight: overline.weight,
                        lineHeight: overline.lineHeight,
                        letterSpacing: overline.letterSpacing
                    }
                }
            } }));
        return Object.assign(Object.assign({}, fullTheme), { isInitialized: isThemeInitialized, setMode,
            getThemeData });
    }, [
        body1.letterSpacing,
        body1.lineHeight,
        body1.size,
        body1.weight,
        body2.letterSpacing,
        body2.lineHeight,
        body2.size,
        body2.weight,
        button.letterSpacing,
        button.lineHeight,
        button.size,
        button.weight,
        caption.letterSpacing,
        caption.lineHeight,
        caption.size,
        caption.weight,
        caption2.letterSpacing,
        caption2.lineHeight,
        caption2.size,
        caption2.weight,
        h1.letterSpacing,
        h1.lineHeight,
        h1.size,
        h1.weight,
        h2.letterSpacing,
        h2.lineHeight,
        h2.size,
        h2.weight,
        h3.letterSpacing,
        h3.lineHeight,
        h3.size,
        h3.weight,
        h4.letterSpacing,
        h4.lineHeight,
        h4.size,
        h4.weight,
        h5.letterSpacing,
        h5.lineHeight,
        h5.size,
        h5.weight,
        h6.letterSpacing,
        h6.lineHeight,
        h6.size,
        h6.weight,
        overline.letterSpacing,
        overline.lineHeight,
        overline.size,
        overline.weight,
        subtitle1.letterSpacing,
        subtitle1.lineHeight,
        subtitle1.size,
        subtitle1.weight,
        subtitle2.letterSpacing,
        subtitle2.lineHeight,
        subtitle2.size,
        subtitle2.weight,
        subtitle3.letterSpacing,
        subtitle3.lineHeight,
        subtitle3.size,
        subtitle3.weight,
        isThemeInitialized,
        mode,
        getThemeData,
        resolvedTheme
    ]);
    return (React.createElement(MuiThemeProvider, { theme: theme }, React.createElement(CssBaseline, null), children));
};
//# sourceMappingURL=theme.js.map