/* eslint-disable no-mixed-operators */
/* eslint-disable radix */
/* eslint-disable no-unused-expressions */
import React, { useState, useEffect, useContext } from 'react';
import merge from 'lodash.merge';
import { ConfigServiceContext } from '../utils/ConfigProvider';
import LoadingScreen from '../components/LoadingScreen';
import { ThemeProvider } from 'styled-components';
import colors from '../themes/foundations/color';
function isLight(color) {
    const hex = color.replace('#', '');
    const cr = parseInt(hex.substr(0, 2), 16);
    const cg = parseInt(hex.substr(2, 2), 16);
    const cb = parseInt(hex.substr(4, 2), 16);
    const brightness = ((cr * 299) + (cg * 587) + (cb * 114)) / 1000;
    return brightness > 155;
}
function shadeColor(color, percent) {
    let R = parseInt(color.substring(1, 3), 16);
    let G = parseInt(color.substring(3, 5), 16);
    let B = parseInt(color.substring(5, 7), 16);
    R = parseInt(`${R * (100 + percent) / 100}`);
    G = parseInt(`${G * (100 + percent) / 100}`);
    B = parseInt(`${B * (100 + percent) / 100}`);
    R = (R < 255) ? R : 255;
    G = (G < 255) ? G : 255;
    B = (B < 255) ? B : 255;
    const RR = ((R.toString(16).length === 1) ? `0${R.toString(16)}` : R.toString(16));
    const GG = ((G.toString(16).length === 1) ? `0${G.toString(16)}` : G.toString(16));
    const BB = ((B.toString(16).length === 1) ? `0${B.toString(16)}` : B.toString(16));
    return `#${RR}${GG}${BB}`;
}
const colorToShades = (baseShade, w) => {
    const lighterShade = shadeColor(baseShade, 20 + w);
    const darkerShade = shadeColor(baseShade, -20 - w);
    const darkestShade = shadeColor(baseShade, -30 - w);
    return [lighterShade, baseShade, darkerShade, darkestShade];
};
const processColors = (colors) => {
    const newColors = colors;
    if (newColors?.primary && typeof newColors.primary === 'string') {
        newColors.primary = colorToShades(newColors.primary, 25);
    }
    if (newColors?.secondary && typeof colors.secondary === 'string') {
        const secondary = colorToShades(newColors.secondary, 10);
        newColors.secondary = isLight(newColors.secondary) ? secondary : secondary.reverse();
    }
    if (newColors?.textPrimary && typeof colors.textPrimary === 'string') {
        const text = colorToShades(newColors.textPrimary, -10);
        newColors.textPrimary = isLight(newColors.textPrimary) ? text.reverse() : text;
    }
    const weightedColors = { primary: {}, secondary: {}, textPrimary: {} };
    if (newColors?.primary) {
        weightedColors.primary = {
            300: newColors.primary[0],
            500: newColors.primary[1],
            700: newColors.primary[2],
            900: newColors.primary[3],
        };
    }
    else
        delete weightedColors.primary;
    if (newColors?.secondary) {
        weightedColors.secondary = {
            1000: newColors.secondary[0],
            900: newColors.secondary[1],
            800: newColors.secondary[2],
            700: newColors.secondary[3],
        };
    }
    else
        delete weightedColors.secondary;
    if (newColors?.textPrimary) {
        weightedColors.textPrimary = {
            400: newColors.textPrimary[0],
            300: newColors.textPrimary[1],
            200: newColors.textPrimary[2],
            100: newColors.textPrimary[3],
        };
    }
    else
        delete weightedColors.textPrimary;
    if (newColors?.videoBackground) {
        Object.assign(weightedColors, { videoBackground: newColors.videoBackground });
    }
    return weightedColors;
};
const processTheme = (theme, clientOverrideTheme) => ({
    fonts: {
        heading: '"Inter", sans-serif',
        body: '"Lato", system-ui, sans-serif',
        mono: 'Menlo, monospace',
    },
    colors: merge(merge(colors, theme?.colors), processColors(clientOverrideTheme?.colors || {})),
    logo: clientOverrideTheme?.logo || theme?.logo || '/dyte_logo.svg',
});
const DyteThemeProvider = ({ children }) => {
    const [theme, _setTheme] = useState(null);
    const context = useContext(ConfigServiceContext);
    const themeConfig = {
        // eslint-disable-next-line react/destructuring-assignment
        logo: context?.sessionConfig?.theme.header.elements.logo,
        colors: context?.sessionConfig?.theme.colors || {},
    };
    const setTheme = (newTheme) => {
        _setTheme(processTheme(newTheme, themeConfig));
    };
    useEffect(() => {
        if (themeConfig?.colors || themeConfig?.logo) {
            setTheme(themeConfig);
        }
        // eslint-disable-next-line react/destructuring-assignment
    }, [context?.sessionConfig?.theme.header.elements.logo, context?.sessionConfig?.theme.colors]);
    if (!theme || !context)
        return <LoadingScreen />;
    return (<ThemeProvider theme={theme}>
			{children}
		</ThemeProvider>);
};
export default DyteThemeProvider;
//# sourceMappingURL=CustomThemeChakraProvider.js.map