import {createTheme} from '@mui/material/styles';

const theme = createTheme({
    palette: {
        primary: {
            main: '#067a40',
        },
    },
    components: {
        // Buttons
        MuiButton: {
            defaultProps: {
                variant: 'outlined',
            },
            styleOverrides: {
                root: ({ownerState}: {ownerState: any}) => ({
                    color: '#067a40',
                    borderColor: '#067a40',
                    textTransform: 'none',
                    ...(ownerState.component === 'a'
                        ? {
                            border: 'none',
                            padding: 'unset',
                            '&:hover': {
                                textDecoration: 'underline',
                                backgroundColor: 'transparent',
                            },
                        }
                        : {
                            '&:hover': {
                                backgroundColor: '#067a40',
                                color: '#fff',
                            },
                        }),
                }),
            },
            variants: [
                {
                    // 👇 Custom variant for the Submit Signature button
                    props: { variant: 'submitSignature' },
                    style: {
                        backgroundColor: '#fff', 
                        color: '#067a40',
                        border: '1px solid #067a40',
                        '&:hover': {
                            backgroundColor: '#067a40',
                            color: '#fff',
                        },
                        '&.Mui-disabled': {
                            backgroundColor: '#eeeeee',
                            color: '#9e9e9e',
                            border: '1px solid #645962',
                            boxShadow: 'none',
                            cursor: 'not-allowed',
                        },
                    },
                },
            ],
        },

        // TextFields (outlined style)
        MuiOutlinedInput: {
            styleOverrides: {
                root: {
                    '& .MuiOutlinedInput-notchedOutline': {
                        borderColor: '#067a40',
                    },
                    '&:hover .MuiOutlinedInput-notchedOutline': {
                        borderColor: '#067a40',
                    },
                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                        borderColor: '#067a40',
                    },
                },
            },
        },
        MuiInputLabel: {
            styleOverrides: {
                root: {
                    '&.Mui-focused': {
                        color: '#067a40',
                    },
                },
            },
        },

        // Select
        MuiSelect: {
            styleOverrides: {
                icon: {
                    color: '#067a40',
                },
            },
        },

        // Autocomplete
        MuiAutocomplete: {
            styleOverrides: {
                root: {
                    '& .MuiInputBase-input': {
                        border: 'none',
                    },
                    '& .MuiInputBase-input:focus': {
                        outline: 'unset !important',
                    },
                    '& .MuiOutlinedInput-root.Mui-focused fieldset': {
                        borderColor: '#067a40',
                    },
                    '& .MuiInputLabel-root.Mui-focused': {
                        color: '#067a40',
                    },
                },
            },
        },

        // Pagination
        MuiPaginationItem: {
            styleOverrides: {
                root: {
                    color: '#067a40',
                    border: '1px solid #067a40',
                    textTransform: 'none',
                    '&:hover': {
                        backgroundColor: '#067a40',
                        color: '#fff',
                    },
                    '&.Mui-selected': {
                        backgroundColor: '#067a40',
                        color: '#fff',
                        '&:hover': {
                            backgroundColor: '#067a40',
                            color: '#fff',
                        },
                    },
                },
                ellipsis: {
                    border: 'none',
                },
            },
        },
        MuiCheckbox: {
            styleOverrides: {
                root: {
                    padding: 'unset'
                }
            }
        },
        MuiAlert: {
            styleOverrides: {
                // New way: using combined class selectors
                root: {
                    '&.MuiAlert-filled.MuiAlert-colorError': {
                        backgroundColor: '#af0d10',
                        color: '#ffffff',
                        '& .MuiAlert-icon': {
                            color: '#ffffff',
                        },
                    },
                },
            },
        },
    },
});

export default theme;
