import { Components, ComponentsOverrides, Theme, ThemeOptions } from "@mui/material";

const components = (theme: ThemeOptions): Components<Omit<Theme, "components">> => ({
    MuiTooltip: {
        defaultProps: {
            arrow: true,
            disableInteractive: true,
        }
    },
    MuiButton: {
        styleOverrides: {
            root: {
                textTransform: 'none',
                borderRadius: 15,
                minWidth: 0,
            },
            text: {
                "&:hover": {
                    background: 'transparent',
                    textDecoration: 'underline'
                },
                "&:active": {
                    textDecoration: 'none'
                }
            }
        },
    },
    MuiAlert: {
        styleOverrides: {
            root: {
                "&.MuiAlert-standardSuccess": {
                    
                }
            }
        }
    },
    MuiDialog: {
        styleOverrides: {
            root: {
                backdropFilter: 'blur(10px)',
                "& .MuiDialog-paper": {
                    background: 'rgba(20, 26, 33, 0.8)',
                    backdropFilter: 'blur(10px)',
                    borderRadius: '15px',
                    boxShadow: '0px 0px 10px 1px #1E242B',
                }
            }
        }
    },
    MuiInputLabel: {
        styleOverrides: {
            root: {
                "&.Mui-focused": {
                    color: theme.palette.text.primary,
                }
            }
        }
    },
    MuiFilledInput: {
        defaultProps: {
            disableUnderline: true,
        },
        styleOverrides: {
            root: {
                background: '#141A21',
                borderRadius: 15,
                boxShadow: '0px 0px 20px 1px #1E242B',
                "& fieldset": { border: 'none' },
            }
        }
    },
    MuiSwitch: {
        styleOverrides: {
            root: {
                width: 42,
                height: 26,
                padding: 0,
                margin: 8,
            },
            switchBase: {
                padding: 1,
                '&$checked, &$colorPrimary$checked, &$colorSecondary$checked': {
                    transform: 'translateX(16px)',
                    color: '#fff',
                    '& + $track': {
                        opacity: 1,
                        border: 'none',
                    },
                },
            },
            thumb: {
                width: 24,
                height: 24,
            },
            track: {
                borderRadius: 13,
                border: '1px solid #bdbdbd',
                backgroundColor: '#fafafa',
                opacity: 1,
                transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
            },
        },
    },
})

export default components;