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)',
                        },
                        '& textarea': {
                            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': '#282c34',
                        color: 'var(--TextField-brandBorderColor)',
                        '&:hover': {
                            backgroundColor: 'var(--variant-custom-textBg)',
                            borderColor: 'var(--variant-custom-textBg)',
                            boxShadow: 'none',
                        },
                    },
                    contained: {
                        '--TextField-brandBorderColor': '#E0E3E7',
                        '--contained-custom-textBg': '#282c34',
                        color: 'var(--contained-custom-textBg)',
                        backgroundColor: 'var(--TextField-brandBorderColor)',
                        borderColor: 'var(--TextField-brandBorderColor)',
                        borderRadius: '4px',
                        borderWidth: '1px',
                        borderStyle: 'solid',
                        '&:hover': {
                            backgroundColor: 'var(--contained-custom-textBg)',
                            borderColor: 'var(--TextField-brandBorderColor)',
                            color: 'var(--TextField-brandBorderColor)',
                            boxShadow: 'none',
                        },
                    }
                }
            },
            MuiPaper: {
                styleOverrides: {
                    root: {
                        '--TextField-brandBorderColor': '#E0E3E7',
                        backgroundColor: '#282c34',
                        color: 'var(--TextField-brandBorderColor)',
                        width: '90%',
                        maxWidth: '90%!important',
                        '@media (width <= 570px)': {
                            maxWidth: '95%!important',
                            width: '95%',
                            margin: '5px'
                        },
                    }
                }
            },
            MuiFab: {
                styleOverrides: {
                    root: {
                        '--Fab-text-color': '#E0E3E7',
                        '--Fab-bg-color': '#282c34',
                        '--Fab-bg-color-hover': '#3b444c',
                        backgroundColor: 'var(--Fab-bg-color)',
                        color: 'var(--Fab-text-color)',
                        '&:hover': {
                            backgroundColor: 'var(--Fab-bg-color-hover)',
                        },
                    }
                }
            }
        }
    });

export default customTheme;