import { SxProps, Theme } from '@mui/material';

export type ButtonColorVariant = 'blue' | 'blue-outlined' | 'gray' | 'icon-error';
export const getButtonStyle = (color: ButtonColorVariant, iconButton: boolean, sx?: SxProps<Theme>): SxProps<Theme> => {
    switch (color) {
        case 'blue': {
            return [
                theme => ({
                    backgroundColor: '#3489E4',
                    color: '#fff',
                    borderRadius: '8px',
                    padding: iconButton ? '9px' : '10px 18px',

                    fontSize: '18px',
                    fontWeight: 600,
                    lineHeight: '24px',
                    textTransform: 'capitalize',

                    svg: {
                        color: '#fff',
                        width: iconButton ? '18px' : '24px',
                        height: iconButton ? '18px' : '24px',
                    },
                    '&:hover': {
                        backgroundColor: '#1976d2',
                    },
                    '&:active': {
                        opacity: 0.8,
                    },
                    ...(sx instanceof Array ? {} : sx),
                }),
                ...(sx instanceof Array ? sx : []),
            ];
        }
        case 'blue-outlined': {
            return [
                theme => ({
                    backgroundColor: 'transparent',
                    color: '#000',
                    borderRadius: '8px',
                    padding: iconButton ? '9px' : '10px 18px',
                    border: '1px solid #3489E4',

                    fontSize: '18px',
                    fontWeight: 600,
                    lineHeight: '24px',
                    textTransform: 'capitalize',

                    svg: {
                        color: '#fff',
                        width: iconButton ? '18px' : '24px',
                        height: iconButton ? '18px' : '24px',
                    },
                    '&:hover': {
                        backgroundColor: '#1976d2',
                        color: '#fff',
                    },
                    '&:active': {
                        opacity: 0.8,
                    },
                    ...(sx instanceof Array ? {} : sx),
                }),
                ...(sx instanceof Array ? sx : []),
            ];
        }
        case 'gray': {
            return [
                theme => ({
                    backgroundColor: '#FFF',
                    color: '#000',
                    border: '2px solid #EDF1F7',
                    borderRadius: '8px',
                    padding: iconButton ? '9px' : '8px 16px',

                    fontSize: '16px',
                    fontWeight: 400,
                    lineHeight: '20px',
                    textTransform: 'capitalize',

                    svg: {
                        color: '#3489E4',
                        width: '18px',
                        height: '18px',
                    },
                    '&:hover': {
                        backgroundColor: '#EDF1F7',
                        color: '#000',
                    },
                    '&:active': {
                        opacity: 0.8,
                    },
                    ...(sx instanceof Array ? {} : sx),
                }),
                ...(sx instanceof Array ? sx : []),
            ];
        }
        case 'icon-error': {
            return [
                theme => ({
                    backgroundColor: theme.palette.error.main,
                    color: '#fff',

                    ...(sx instanceof Array ? {} : sx),
                }),
                ...(sx instanceof Array ? sx : []),
            ];
        }
    }
};
