"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createTheme = void 0;
const tslib_1 = require("tslib");
const styles_1 = require("@material-ui/core/styles");
const core_1 = require("@material-ui/core");
const typography_1 = tslib_1.__importDefault(require("./typography"));
const shadows_1 = require("./shadows");
const constants_1 = require("../constants");
const baseConfig = {
    direction: 'ltr',
    typography: typography_1.default,
    overrides: {
        MuiLinearProgress: {
            root: {
                borderRadius: 3,
                overflow: 'hidden',
            },
        },
        MuiListItemIcon: {
            root: {
                minWidth: 32,
            },
        },
        MuiChip: {
            root: {
                backgroundColor: 'rgba(0,0,0,0.075)',
            },
        },
        MuiTab: {
            root: {
                textTransform: 'none',
            },
        },
        MuiButton: {
            root: {
                textTransform: 'none',
            },
        },
        MuiAccordionDetails: {
            root: {
                paddingTop: 0,
            },
        },
    },
};
const themeConfigs = [
    {
        name: constants_1.THEME.LIGHT,
        overrides: {
            MuiInputBase: {
                input: {
                    '&::placeholder': {
                        opacity: 1,
                        color: core_1.colors.blueGrey[500],
                    },
                },
            },
            MuiTypography: {
                root: {
                    textTransform: 'none',
                    color: core_1.colors.blueGrey[900],
                },
            },
            ...baseConfig.overrides,
        },
        palette: {
            action: {
                active: core_1.colors.blueGrey[500],
            },
            background: {
                default: core_1.colors.common.white,
                dark: '#f4f6f8',
                paper: core_1.colors.common.white,
                bar: 'rgb(200, 200, 200)!important',
            },
            primary: {
                main: core_1.colors.indigo[500],
            },
            secondary: {
                main: '#5850EC',
            },
            text: {
                primary: core_1.colors.blueGrey[900],
                secondary: core_1.colors.blueGrey[500],
            },
        },
        shadows: shadows_1.softShadows,
    },
    {
        name: constants_1.THEME.ONE_DARK,
        overrides: {
            MuiTypography: {
                root: {
                    textTransform: 'none',
                    color: '#e6e5e8',
                },
            },
            ...baseConfig.overrides,
        },
        palette: {
            type: 'dark',
            action: {
                active: 'rgba(255, 255, 255, 0.54)',
                hover: 'rgba(255, 255, 255, 0.04)',
                selected: 'rgba(255, 255, 255, 0.08)',
                disabled: 'rgba(255, 255, 255, 0.26)',
                disabledBackground: 'rgba(255, 255, 255, 0.12)',
                focus: 'rgba(255, 255, 255, 0.12)',
            },
            background: {
                default: '#282C34',
                dark: '#1c2025',
                paper: '#282C34',
                bar: 'rgb(120, 120, 120)!important',
            },
            primary: {
                main: '#8a85ff',
            },
            secondary: {
                main: '#8a85ff',
            },
            text: {
                primary: '#e6e5e8',
                secondary: '#adb0bb',
            },
            error: {
                main: '#e06c75',
                dark: '#be5046',
            },
        },
        shadows: shadows_1.strongShadows,
    },
    {
        name: constants_1.THEME.UNICORN,
        overrides: {
            MuiTypography: {
                root: {
                    textTransform: 'none',
                    color: '#e6e5e8',
                },
            },
            ...baseConfig.overrides,
        },
        palette: {
            type: '',
            action: {
                active: 'rgba(255, 255, 255, 0.54)',
                hover: 'rgba(255, 255, 255, 0.04)',
                selected: 'rgba(255, 255, 255, 0.08)',
                disabled: 'rgba(255, 255, 255, 0.26)',
                disabledBackground: 'rgba(255, 255, 255, 0.12)',
                focus: 'rgba(255, 255, 255, 0.12)',
            },
            background: {
                default: '#2a2d3d',
                dark: '#222431',
                paper: '#2a2d3d',
                bar: 'rgb(120, 120, 120)!important',
            },
            primary: {
                main: '#a67dff',
            },
            secondary: {
                main: '#a67dff',
            },
            text: {
                primary: '#f6f5f8',
                secondary: '#9699a4',
            },
        },
        shadows: shadows_1.strongShadows,
    },
];
function createTheme(name) {
    let themeConfig = themeConfigs.find(theme => theme.name === name);
    if (!themeConfig) {
        console.warn(new Error(`The theme ${name} is not valid`));
        [themeConfig] = themeConfigs;
    }
    // @ts-ignore
    const options = {
        ...baseConfig,
        ...themeConfig,
        typography: typography_1.default,
    };
    let theme = styles_1.createMuiTheme(options);
    theme = styles_1.responsiveFontSizes(theme);
    return theme;
}
exports.createTheme = createTheme;
/**
 *
" +---------------------------------------------+
" |  Color Name  |         RGB        |   Hex   |
" |--------------+--------------------+---------|
" | Black        | rgb(40, 44, 52)    | #282c34 |
" |--------------+--------------------+---------|
" | White        | rgb(171, 178, 191) | #abb2bf |
" |--------------+--------------------+---------|
" | Light Red    | rgb(224, 108, 117) | #e06c75 |
" |--------------+--------------------+---------|
" | Dark Red     | rgb(190, 80, 70)   | #be5046 |
" |--------------+--------------------+---------|
" | Green        | rgb(152, 195, 121) | #98c379 |
" |--------------+--------------------+---------|
" | Light Yellow | rgb(229, 192, 123) | #e5c07b |
" |--------------+--------------------+---------|
" | Dark Yellow  | rgb(209, 154, 102) | #d19a66 |
" |--------------+--------------------+---------|
" | Blue         | rgb(97, 175, 239)  | #61afef |
" |--------------+--------------------+---------|
" | Magenta      | rgb(198, 120, 221) | #c678dd |
" |--------------+--------------------+---------|
" | Cyan         | rgb(86, 182, 194)  | #56b6c2 |
" |--------------+--------------------+---------|
" | Gutter Grey  | rgb(76, 82, 99)    | #4b5263 |
" |--------------+--------------------+---------|
" | Comment Grey | rgb(92, 99, 112)   | #5c6370 |
" +---------------------------------------------+
 */
