import type {Theme} from "@mui/material";
import {createTheme} from "@mui/material";
import {outlinedInputClasses} from "@mui/material";

const customTheme = (outerTheme: Theme) =>
    createTheme({
        palette: {
            mode: outerTheme.palette.mode,
        },
        components: {
            MuiTextField: {
                styleOverrides: {
                    root: {
                        '--TextField-brandBorderColor': '#E0E3E7',
                        '--TextField-brandBorderHoverColor': '#B2BAC2',
                        '--TextField-brandBorderFocusedColor': '#6F7E8C',
                        '& label': {
                            color: 'var(--TextField-brandBorderColor)',
                        },
                        '& label.Mui-focused': {
                            color: 'var(--TextField-brandBorderColor)',
                        },
                        '& input': {
                            color: 'var(--TextField-brandBorderColor)',
                            borderColor: 'var(--TextField-brandBorderColor)',
                        },
                    },
                },
            },
            MuiOutlinedInput: {
                styleOverrides: {
                    notchedOutline: {
                        borderColor: 'var(--TextField-brandBorderColor)',
                    },
                    root: {
                        [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
                            borderColor: 'var(--TextField-brandBorderHoverColor)',
                        },
                        [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: {
                            borderColor: 'var(--TextField-brandBorderFocusedColor)',
                        },
                    },
                },
            },
            MuiDivider: {
                styleOverrides: {
                    root: {
                        '--TextField-brandBorderColor': '#E0E3E7',
                        borderColor: 'var(--TextField-brandBorderColor)',
                        borderWidth: 1,
                        width: '95%',
                    }
                }
            },
            MuiButton: {
                styleOverrides: {
                    root: {
                        '--TextField-brandBorderColor': '#E0E3E7',
                        '--variant-outlinedBorder': '#b5b5b5',
                        '--variant-containedBg': '#b5b5b5',
                        '--variant-custom-textBg': 'rgba(246,246,248,0.06)',
                        color: 'var(--TextField-brandBorderColor)',
                        '&:hover': {
                            backgroundColor: 'var(--variant-custom-textBg)',
                            borderColor: 'var(--variant-custom-textBg)',
                            boxShadow: 'none',
                        },
                    }
                }
            }
        }
    });

export default customTheme;