import makeStyles from '@mui/styles/makeStyles';
import type { Theme } from '../@styles/theme-provider';

export interface CreateClassesProps {
  arrowSide?: 'topLeft' | 'topRight';
  search?: boolean;
  showSort?: boolean;
  width?: number;
}

const createClasses = makeStyles<Theme, CreateClassesProps>(theme => ({
  menuRoot: props => {
    const { width = 0, arrowSide } = props;
    return {
      width,
      '&:before': {
        left: arrowSide === 'topLeft' ? theme.spacing(1) : 'auto !important',
        right: arrowSide === 'topLeft' ? 'auto !important' : theme.spacing(1)
      }
    };
  },
  menuListWrapper: {
    // Set searchable field width (because it's `inline-flex`)
    '& > .MuiTextField-root': {
      width: '100%',
      '& > .MuiInputBase-root': {
        borderBottom: `1px solid ${theme.palette.primary[200]}`,
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
        '&:hover': {
          boxShadow: 'none'
        },
        '& > input': {
          borderBottom: 'none'
        },
        '& > fieldset': {
          border: 'none',
          boxShadow: 'none'
        }
      }
    },
    '& > ul, & > div > ul': {
      'padding-inline-start': 0
    },
    // VariableSizeList styles
    '& .variable-size-list-wrapper': {
      maxWidth: '100%'
    }
  },
  menuListWithScrollbar: {
    '& > div > $menuList': {
      marginRight: theme.spacing(1)
    },
    '& .variable-size-list-wrapper': {
      maxWidth: `calc(100% - ${theme.spacing(1)})`
    }
  },
  menuListHeader: {
    marginTop: theme.spacing(1),
    '& + div $menuList': {
      marginTop: 0
    }
  },
  menuListFooter: {
    marginBottom: theme.spacing(1)
  },
  menuListLoader: {
    padding: theme.spacing(2),
    color: theme.palette.primary[400]
  },
  variableSizeList: {
    margin: theme.spacing(1, 0)
  },
  variableSizeListInner: {
    margin: 0,
    padding: 0
  },
  menuList: {
    '&::-webkit-scrollbar': {
      minHeight: theme.spacing(3),
      height: theme.spacing(9)
    },
    '&::-webkit-scrollbar-thumb': {
      background: 'transparent'
    },
    '&:hover, &:focus': {
      '&::-webkit-scrollbar-thumb': {
        background: 'rgba(217, 227, 240, 1)'
      }
    },
    overflow: 'overlay',
    flexDirection: 'column',
    margin: theme.spacing(1, 0),
    padding: 0,
    maxHeight: theme.spacing(285 / 8)
  },
  menuListSubheader: {
    ...theme.typography.body2,
    color: theme.palette.primary[400],
    lineHeight: theme.spacing(5),
    textAlign: 'center'
  },
  singleSelected: {
    color: theme.palette.secondary[500]
  },
  menuItem: props => {
    const { showSort } = props;
    return {
      height: '100%',
      minHeight: theme.spacing(5),
      pointerEvents: 'all',
      zIndex: 1300,
      '&:not(:last-of-type)': {
        marginBottom: theme.spacing(0.25)
      },
      '&.Mui-disabled': {
        // to prevent a weird lint error
        pointerEvents: 'none !important' as 'none'
      },
      '& #dragIcon': {
        visibility: 'hidden',
        pointerEvents: showSort ? 'auto' : 'none'
      },
      '&:hover #dragIcon': {
        visibility: showSort ? 'visible' : 'hidden'
      },
      '&:hover > div > .MuiIconButton-root': {
        visibility: 'visible'
      },
      '&[hidden]': {
        // can't use "display: none" due to drag-and-drop issues
        display: 'flex',
        minHeight: 0,
        maxHeight: 0,
        padding: 0,
        overflow: 'hidden',
        visibility: 'hidden',
        '&:not(:last-of-type)': {
          marginBottom: 0
        }
      },
      '& .highlight': {
        color: theme.palette.secondary[500],
        backgroundColor: 'transparent'
      }
    };
  },
  menuItemSelected: {
    '&:hover': {
      backgroundColor: theme.palette.secondary[100]
    }
  },
  nestedListWrapper: {
    display: 'flex',
    flexDirection: 'column',
    WebkitFlexDirection: 'column',
    padding: 0,
    '&, &:hover': {
      backgroundColor: 'transparent'
    }
  },
  nestedListLabel: {
    maxHeight: theme.spacing(5),
    padding: theme.spacing(1, 2)
  },
  nestedListItems: {
    display: 'flex',
    flexDirection: 'column',
    WebkitFlexDirection: 'column',
    width: '100%'
  },
  icon: {
    width: theme.spacing(2),
    height: theme.spacing(2),
    display: 'flex',
    fill: theme.palette.primary[600],
    '& > div': {
      display: 'contents'
    }
  },
  searchIcon: {
    marginRight: theme.spacing(2)
  },
  dragIcon: {
    marginLeft: theme.spacing(-1),
    marginRight: theme.spacing(0.5)
  },
  menuItemActionIcon: {
    color: theme.palette.secondary[500],
    marginInlineStart: theme.spacing(1),
    padding: 0,
    cursor: 'inherit',
    pointerEvents: 'none',
    '&:hover': {
      background: 'none'
    }
  },
  menuItemActionIconClickable: {
    color: theme.palette.primary[400],
    cursor: 'pointer',
    pointerEvents: 'all',
    '&.MuiIconButton-root': {
      visibility: 'hidden'
    }
  },
  textFieldInput: {
    borderTopLeftRadius: theme.spacing(0.5),
    borderTopRightRadius: theme.spacing(0.5),
    borderBottom: `1px solid ${theme.palette.primary[200]}`,
    paddingRight: theme.spacing(2),
    '& input': {
      padding: 0
    }
  },
  textFieldLabel: {
    position: 'absolute',
    width: '1px',
    height: '1px',
    overflow: 'hidden',
    clip: 'rect(1px 1px 1px 1px)',
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    // eslint-disable-next-line no-dupe-keys
    clip: 'rect(1px, 1px, 1px, 1px)', // For different browsers
    whiteSpace: 'nowrap'
  },
  checkboxFormControl: {
    paddingLeft: theme.spacing(0.5)
  },
  checkbox: {
    padding: '0 !important',
    marginRight: theme.spacing(1)
  },
  buttonBottom: {
    width: '100%',
    height: '32px'
  },
  formControlLabel: {
    marginLeft: '0 !important',
    width: '100%'
  },
  checkboxLabel: {
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis'
  },
  searchField: {
    '& > div.MuiMenu-list': {
      marginTop: 0,
      marginBottom: 0
    }
  }
}));

export default createClasses;