import { alpha } from '@mui/material/styles';
import { svgIconClasses } from '@mui/material/SvgIcon';
import { typographyClasses } from '@mui/material/Typography';
import { buttonBaseClasses } from '@mui/material/ButtonBase';
import { chipClasses } from '@mui/material/Chip';
import { iconButtonClasses } from '@mui/material/IconButton';
import { gray, red, brand, green, orange } from '../themePrimitives';

/* eslint-disable import/prefer-default-export */
export const dataDisplayCustomizations = {
    MuiTableCell: {
        styleOverrides: {
            root: ({ theme }) => ({
                '&.MuiTableCell-root': {
                    borderBottom: '1px solid #e5e7ed',
                },
                paddingTop: 4,
                paddingBottom: 4,
                ...theme.applyStyles('dark', {
                    borderColor: gray[400],
                    backgroundColor: gray[800],
                    '&.MuiTableCell-root': {
                        borderBottom: '1px solid #242a37',
                    },
                }),
            }),
        },
    },
    MuiTableRow: {
        styleOverrides: {
            root: ({ theme }) => ({
                '&:last-of-type td': {
                    borderBottom: 0,
                },
                ...theme.applyStyles('dark', {
                    borderColor: 'red',
                }),

            }),
        },
    },
    // MuiIconButton: {
    //     styleOverrides: {
    //         root: ({ theme }) => ({
    //             boxShadow: 'none',
    //             borderRadius: 3,// (theme.vars || theme).shape.borderRadius,
    //             textTransform: 'none',
    //             fontWeight: theme.typography.fontWeightMedium,
    //             letterSpacing: 0,
    //             color: (theme.vars || theme).palette.text.primary,
    //             border: '1px solid ',
    //             borderColor: gray[200],
    //             backgroundColor: alpha(gray[50], 0.3),
    //             '&:hover': {
    //                 backgroundColor: gray[100],
    //                 borderColor: gray[300],
    //             },
    //             '&:active': {
    //                 backgroundColor: gray[200],
    //             },
    //             ...theme.applyStyles('dark', {
    //                 backgroundColor: gray[800],
    //                 borderColor: gray[700],
    //                 '&:hover': {
    //                     backgroundColor: gray[900],
    //                     borderColor: gray[600],
    //                 },
    //                 '&:active': {
    //                     backgroundColor: gray[900],
    //                 },
    //             }),
    //             variants: [
    //                 {
    //                     props: {
    //                         size: 'small',
    //                     },
    //                     style: {
    //                         width: '1.25rem',
    //                         height: '1.25rem',
    //                         padding: '0.25rem',
    //                         [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
    //                     },
    //                 },
    //                 {
    //                     props: {
    //                         size: 'medium',
    //                     },
    //                     style: {
    //                         width: '2.5rem',
    //                         height: '2.5rem',
    //                     },
    //                 },
    //             ],
    //         }),
    //     },
    // },
    MuiList: {
        styleOverrides: {
            root: {
                padding: '8px',
                display: 'flex',
                flexDirection: 'column',
                gap: 0,
            },
        },
    },
    MuiListItem: {
        styleOverrides: {
            root: ({ theme }) => ({
                [`& .${svgIconClasses.root}`]: {
                    width: '1rem',
                    height: '1rem',
                    // color: (theme.vars || theme).palette.text.secondary,
                },
                [`& .${typographyClasses.root}`]: {
                    fontWeight: 500,
                },
                [`& .${buttonBaseClasses.root}`]: {
                    display: 'flex',
                    gap: 8,
                    padding: '2px 8px',
                    borderRadius: (theme.vars || theme).shape.borderRadius,
                    opacity: 0.7,
                    '&.Mui-selected': {
                        opacity: 1,
                        backgroundColor: alpha(theme.palette.action.selected, 0.3),
                        [`& .${svgIconClasses.root}`]: {
                            color: (theme.vars || theme).palette.text.primary,
                        },
                        '&:focus-visible': {
                            backgroundColor: alpha(theme.palette.action.selected, 0.3),
                        },
                        '&:hover': {
                            backgroundColor: alpha(theme.palette.action.selected, 0.5),
                        },
                    },
                    '&:focus-visible': {
                        backgroundColor: 'transparent',
                    },
                },
            }),
        },
    },
    MuiListItemText: {
        styleOverrides: {
            primary: ({ theme }) => ({
                fontSize: theme.typography.body2.fontSize,
                fontWeight: 500,
                lineHeight: theme.typography.body2.lineHeight,
            }),
            secondary: ({ theme }) => ({
                fontSize: theme.typography.caption.fontSize,
                lineHeight: theme.typography.caption.lineHeight,
            }),
        },
    },
    MuiListSubheader: {
        styleOverrides: {
            root: ({ theme }) => ({
                backgroundColor: 'transparent',
                padding: '4px 8px',
                fontSize: theme.typography.caption.fontSize,
                fontWeight: 500,
                lineHeight: theme.typography.caption.lineHeight,
            }),
        },
    },
    MuiListItemIcon: {
        styleOverrides: {
            root: {
                minWidth: 0,
            },
        },
    },
    MuiChip: {
        defaultProps: {
            size: 'small',
        },
        styleOverrides: {
            root: ({ theme }) => ({
                border: '1px solid',
                borderRadius: 5,
                color: 'white',
                padding: '4px 4px',
                '& .MuiChip-label': {
                    lineHeight: 'initial!important',
                    fontSize: 13,
                },
                '&:hover': {
                    backgroundColor: 'inherit',
                },
                variants: [
                    {
                        props: {
                            variant: 'outlined',
                        },
                        style: {
                            backgroundColor: "transparent!important",
                            ...theme.applyStyles('dark', {
                                backgroundColor: "transparent",
                            }),
                        },
                    },
                    {
                        props: {
                            color: 'unknown',
                        },
                        style: {
                            borderColor: gray[100],
                            backgroundColor: gray[50],
                            [`& .${chipClasses.label}`]: {
                                color: gray[400],
                            },
                            [`& .${chipClasses.icon}`]: {
                                color: gray[200],
                            },
                            ...theme.applyStyles('dark', {
                                borderColor: gray[700],
                                backgroundColor: gray[800],
                                [`& .${chipClasses.label}`]: {
                                    color: gray[300],
                                },
                                [`& .${chipClasses.icon}`]: {
                                    color: gray[300],
                                },
                            }),
                        },
                    },
                    {
                        props: {
                            color: 'default',
                        },
                        style: {
                            borderColor: gray[200],
                            backgroundColor: gray[100],
                            [`& .${chipClasses.label}`]: {
                                color: gray[500],
                            },
                            [`& .${chipClasses.icon}`]: {
                                color: gray[500],
                            },
                            ...theme.applyStyles('dark', {
                                borderColor: gray[700],
                                backgroundColor: gray[800],
                                [`& .${chipClasses.label}`]: {
                                    color: gray[300],
                                },
                                [`& .${chipClasses.icon}`]: {
                                    color: gray[300],
                                },
                            }),
                        },
                    },
                    {
                        props: {
                            color: 'primary',
                        },
                        style: {
                            borderColor: brand[100],
                            backgroundColor: brand[50],
                            [`& .${chipClasses.label}`]: {
                                color: brand[500],
                            },
                            [`& .${chipClasses.icon}`]: {
                                color: brand[500],
                            },
                            ...theme.applyStyles('dark', {
                                borderColor: brand[800],
                                backgroundColor: brand[900],
                                [`& .${chipClasses.label}`]: {
                                    color: brand[200],
                                },
                                [`& .${chipClasses.icon}`]: {
                                    color: brand[300],
                                },
                            }),
                        },
                    },
                    {
                        props: {
                            color: 'success',
                        },
                        style: {
                            borderColor: green[200],
                            backgroundColor: green[50],
                            [`& .${chipClasses.label}`]: {
                                color: green[500],
                            },
                            [`& .${chipClasses.icon}`]: {
                                color: green[500],
                            },
                            ...theme.applyStyles('dark', {
                                borderColor: green[800],
                                backgroundColor: green[900],
                                [`& .${chipClasses.label}`]: {
                                    color: green[300],
                                },
                                [`& .${chipClasses.icon}`]: {
                                    color: green[300],
                                },
                            }),
                        },
                    },
                    {
                        props: {
                            color: 'error',
                        },
                        style: {
                            borderColor: red[100],
                            backgroundColor: red[50],
                            [`& .${chipClasses.label}`]: {
                                color: red[500],
                            },
                            [`& .${chipClasses.icon}`]: {
                                color: red[500],
                            },
                            ...theme.applyStyles('dark', {
                                borderColor: red[800],
                                backgroundColor: red[900],
                                [`& .${chipClasses.label}`]: {
                                    color: red[200],
                                },
                                [`& .${chipClasses.icon}`]: {
                                    color: red[300],
                                },
                            }),
                        },
                    },
                    {
                        props: {
                            color: 'warning',
                        },
                        style: {
                            borderColor: orange[300],
                            backgroundColor: orange[50],
                            [`& .${chipClasses.label}`]: {
                                color: orange[400],
                            },
                            [`& .${chipClasses.icon}`]: {
                                color: orange[400],
                            },
                            ...theme.applyStyles('dark', {
                                borderColor: orange[800],
                                backgroundColor: orange[900],
                                [`& .${chipClasses.label}`]: {
                                    color: orange[200],
                                },
                                [`& .${chipClasses.icon}`]: {
                                    color: orange[300],
                                },
                            }),
                        },
                    },
                    {
                        props: { size: 'small' },
                        style: {
                            maxHeight: 20,
                            [`& .${chipClasses.label}`]: {
                                fontSize: theme.typography.caption.fontSize,
                            },
                            [`& .${svgIconClasses.root}`]: {
                                fontSize: theme.typography.caption.fontSize,
                            },
                        },
                    },
                    {
                        props: { size: 'medium' },
                        style: {
                            [`& .${chipClasses.label}`]: {
                                fontSize: theme.typography.caption.fontSize,
                            },
                        },
                    },
                ],
            }),
        },

    },
    MuiTablePagination: {
        styleOverrides: {
            actions: {
                display: 'flex',
                gap: 8,
                marginRight: 6,
                [`& .${iconButtonClasses.root}`]: {
                    minWidth: 0,
                    width: 36,
                    height: 36,
                },
            },
        },
    },
    MuiIcon: {
        defaultProps: {
            fontSize: 'small',
        },
        styleOverrides: {
            root: {
                variants: [
                    {
                        props: {
                            fontSize: 'small',
                        },
                        style: {
                            fontSize: '1rem',
                        },
                    },
                ],
            },
        },
    },
    MuiAccordion: {
        defaultProps: {
            elevation: 0,
            disableGutters: true,
        },
        styleOverrides: {
            root: ({ theme }) => ({
                padding: 4,
                overflow: 'clip',
                backgroundColor: (theme.vars || theme).palette.background.default,
                border: '1px solid',
                borderColor: (theme.vars || theme).palette.divider,
                ':before': {
                    backgroundColor: 'transparent',
                },
                '&:not(:last-of-type)': {
                    borderBottom: 'none',
                },
                '&:first-of-type': {
                    borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
                    borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
                },
                '&:last-of-type': {
                    borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
                    borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
                },
            }),
        },
    },
    MuiAccordionSummary: {
        styleOverrides: {
            root: ({ theme }) => ({
                border: 'none',
                borderRadius: 8,
                '&:hover': { backgroundColor: gray[50] },
                '&:focus-visible': { backgroundColor: 'transparent' },
                ...theme.applyStyles('dark', {
                    '&:hover': { backgroundColor: gray[800] },
                }),
            }),
        },
    },
    MuiAccordionDetails: {
        styleOverrides: {
            root: { mb: 20, border: 'none' },
        },
    },
    MuiPaper: {
        defaultProps: {
            elevation: 0,
        },
    },
    MuiCard: {
        styleOverrides: {
            root: ({ theme }) => {
                return {
                    padding: 16,
                    gap: 16,
                    transition: 'all 100ms ease',
                    // backgroundColor: gray[50],
                    backgroundColor: "#fff",
                    borderRadius: (theme.vars || theme).shape.borderRadius,
                    border: `1px solid ${(theme.vars || theme).palette.divider}`,
                    // boxShadow: 'none',
                    ...theme.applyStyles('dark', {
                        backgroundColor: gray[800],
                    }),
                    variants: [
                        {
                            props: {
                                variant: 'outlined',
                            },
                            style: {
                                border: `1px solid ${(theme.vars || theme).palette.divider}`,
                                boxShadow: 'none',
                                background: 'hsl(0, 0%, 100%)',
                                ...theme.applyStyles('dark', {
                                    background: alpha(gray[900], 0.4),
                                }),
                            },
                        },
                    ],
                };
            },
        },
    },
    MuiCardContent: {
        styleOverrides: {
            root: {
                padding: 0,
                '&:last-child': { paddingBottom: 0 },
            },
        },
    },
    MuiCardHeader: {
        styleOverrides: {
            root: {
                padding: 0,
            },
        },
    },
    MuiCardActions: {
        styleOverrides: {
            root: {
                padding: 0,
            },
        },
    },


};