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

import { lightBaseThemeOptions } from "@/shared/features/theme-switcher/themes/base/light-base-theme";

export const lightTheme: ThemeOptions = {
    ...lightBaseThemeOptions,
    palette: {
        mode: "light",
        primary: {
            main: "#4B46E9",
            light: "#E3E6FF",
            dark: "#2E28DE",
            contrastText: "#FFFFFF",
        },
        secondary: {
            main: "#9495B1",
            light: "#C6C6D7",
            dark: "#696A80",
            contrastText: "#222325",
        },
        danger: {
            main: "#F13520",
            light: "#FFF0F0",
            dark: "#E81902",
            contrastText: "#FFFFFF",
        },
        text: {
            primary: "#222325",
            secondary: "#9495B1",
            additional: "#696A80",
            disabled: "#C6C6D7",
        },
        background: {
            default: "#F4F5FB",
            paper: "#FFFFFF",
            tooltip: "#353744",
            overlay: "#1B1D3399",
            loaderOverlay: "#ffffffb3",
            input: "#FFFFFF",
            clickableHover: "#F4F5FB",
            selectedPaper: "#E9EEFF",
        },
        divider: "#E7E7F3",
        stroke: {
            primary: "#E7E7F3",
            secondary: "#CECDFF",
            secondaryLight: "#E7E8FF",
        },
        status: {
            grey: {
                text: "#9495B1",
                stroke: "#E7E7F3",
                background: "#F4F5FB",
            },
            orange: {
                text: "#FF8A04",
                stroke: "#FED5A7",
                background: "#FFE7CB",
            },
            green: {
                text: "#39AD26",
                stroke: "#BCF2B4",
                background: "#DBFFD5",
            },
            purple: {
                text: "#A46BEA",
                stroke: "#E1C9FE",
                background: "#EEE0FF",
            },
            blue: {
                text: "#6D69DF",
                stroke: "#D7E0FF",
                background: "#E9EEFF",
            },
            red: {
                text: "#F13520",
                stroke: "#FFB2A0",
                background: "#FFD9D0",
            },
            yellow: {
                text: "#BCA339",
                stroke: "#F7DE76",
                background: "#FEF2C0",
            },
        },
        tag: {
            stroke: "#CFD2F0",
            background: "#E7E8FF",
        },
        common: {
            black: "#000000",
            white: "#FFFFFF",
            orange: "#FFB458",
        },
        button: {
            primary: {
                background: "#4B46E9",
                hoverBackground: "#2E28DE",
                clickedBackground: "#2E28DE",
                clickedShadow: "#CECDFF",
                color: "#FFFFFF",
            },
            secondary: {
                background: "#FFFFFF",
                hoverBackground: "#E3E6FF",
                clickedBackground: "#FFFFFF",
                clickedShadow: "#4B46E9",
                color: "#4B46E9",
                border: "#CECDFF",
            },
            alert: {
                background: "#E81902",
                hoverBackground: "#E81902",
                clickedBackground: "#E81902",
                clickedShadow: "#FFB2A0",
                color: "#FFFFFF",
            },
            alertSecondary: {
                background: "#FFF0F0",
                hoverBackground: "#FFD9D0",
                clickedBackground: "#FFF0F0",
                clickedShadow: "#F13520",
                color: "#F13520",
                border: "#FFB2A0",
            },
        },
        selectButton: {
            arrowColor: {
                primary: "#4B46E9",
                secondary: "#4B46E9",
            },
        },
        map: {
            tileFilter: "brightness(1) contrast(1) saturate(0);",
        },
    },
    shadow: {
        drawer: "0px 10px 16px 0px rgba(103, 99, 214, 0.08)",
        menu: "0px 4px 28px 0px rgba(72, 70, 125, 0.20)",
        tooltip: "0px 0px 8px 0px rgba(103, 99, 214, 0.20)",
    },
};
