import { ThemeOptions } from "@mui/material/styles";

import { darkBaseThemeOptions } from "@/shared/features/theme-switcher/themes/base/dark-base-theme";

export const darkTheme: ThemeOptions = {
    ...darkBaseThemeOptions,
    palette: {
        mode: "dark",
        primary: {
            main: "#ff306b",
            light: "#801835",
            dark: "#cc1a4e",
            contrastText: "#FFFFFF",
        },
        secondary: {
            main: "#b2a5a7",
            light: "#d4c8ca",
            dark: "#928588",
            contrastText: "#000000",
        },
        danger: {
            main: "#ff4040",
            light: "#2c2326",
            dark: "#cc2424",
            contrastText: "#FFFFFF",
        },
        text: {
            primary: "#FFFFFF",
            secondary: "#cccccc",
            additional: "#a0a0a0",
            disabled: "#777777",
        },
        background: {
            default: "#02040D",
            paper: "#141621",
            tooltip: "#2e2e2e",
            overlay: "#00000080",
            loaderOverlay: "#00000099",
            input: "#141621",
            clickableHover: "#80183580",
            selectedPaper: "#38121F",
        },
        divider: "#4C4C54",
        stroke: {
            primary: "#4C4C54",
            secondary: "#4C4C54",
            secondaryLight: "#4C4C54",
        },
        status: {
            grey: {
                text: "#cccccc",
                stroke: "#444444",
                background: "#1e1e1e",
            },
            orange: {
                text: "#ffa94d",
                stroke: "#664424",
                background: "#332211",
            },
            green: {
                text: "#4cda3c",
                stroke: "#225522",
                background: "#112211",
            },
            purple: {
                text: "#d9a3e3",
                stroke: "#553355",
                background: "#331f33",
            },
            blue: {
                text: "#5e95ff",
                stroke: "#2d4273",
                background: "#1a2535",
            },
            red: {
                text: "#ff6b6b",
                stroke: "#552222",
                background: "#331111",
            },
            yellow: {
                text: "#f0d25e",
                stroke: "#665522",
                background: "#332d11",
            },
        },
        tag: {
            stroke: "#444444",
            background: "#333333",
        },
        common: {
            black: "#000000",
            white: "#FFFFFF",
            orange: "#ffa94d",
        },
        button: {
            primary: {
                background: "#ff306b",
                hoverBackground: "#cc1a4e",
                clickedBackground: "#cc1a4e",
                clickedShadow: "#552f36",
                color: "#FFFFFF",
            },
            secondary: {
                background: "#141621",
                hoverBackground: "#801835",
                clickedBackground: "#1e1e1e",
                clickedShadow: "#ff306b",
                color: "#ff306b",
                border: "#4C4C54",
            },
            alert: {
                background: "#cc2424",
                hoverBackground: "#cc2424",
                clickedBackground: "#cc2424",
                clickedShadow: "#552222",
                color: "#FFFFFF",
            },
            alertSecondary: {
                background: "#2c2326",
                hoverBackground: "#331111",
                clickedBackground: "#2c2326",
                clickedShadow: "#ff4040",
                color: "#ff4040",
                border: "#552222",
            },
        },
        selectButton: {
            arrowColor: {
                primary: "#cccccc",
                secondary: "#cccccc",
            },
        },
    },
    shadow: {
        drawer: "0px 8px 14px 0px rgba(0, 0, 0, 0.3)",
        menu: "0px 4px 18px 0px rgba(0, 0, 0, 0.4)",
        tooltip: "0px 2px 8px 0px rgba(0, 0, 0, 0.5)",
    },
};
