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

type CreateClassesProps = Pick<DataGridProps, 'stickyHeaderPositionTop'>;

const createClasses = makeStyles<Theme, CreateClassesProps>(theme => ({
  container: {
    height: '100%'
  },
  // FILTERS
  filtersContainer: {
    paddingBottom: theme.spacing(4)
  },
  // TOOLBAR
  toolbarContainer: {
    paddingBottom: theme.spacing(3)
  },
  // DATA GRID
  arrowIcon: {
    color: theme.palette.primary[400]
  },
  dataGridContainer: {},
  dataGridRoot: {
    color: theme.palette.primary[500],
    // detail panels contents
    '& .MuiDataGrid-detailPanels': {
      '& > .MuiDataGrid-detailPanel': {
        padding: theme.spacing(0.25, 0),
        backgroundColor: theme.palette.common.white,
        boxShadow: `0 1px 0 0 ${theme.palette.primary[200]}`
      }
    },
    // customized scrollbars
    '& .customizedWebkitScrollbar': {
      scrollbarColor: `${theme.palette.primary[100]} ${alpha(theme.palette.secondary[200], 1)}`
    },
    '& .customizedWebkitScrollbar::-moz-scrollbar-button, .customizedWebkitScrollbar::-moz-scrollbar-button':
      {
        width: 0
      },
    '& .customizedWebkitScrollbar::-webkit-scrollbar': {
      width: theme.spacing(2),
      height: theme.spacing(2),
      backgroundColor: alpha(theme.palette.secondary[200], 1),
      borderRadius: theme.spacing(1.5)
    },
    '& .customizedWebkitScrollbar::-webkit-scrollbar-thumb': {
      backgroundColor: 'transparent',
      border: `${theme.spacing(0.25)} solid transparent`,
      borderRadius: theme.spacing(1.5),
      boxShadow: `0 0 0 ${theme.spacing(1)} inset ${theme.palette.primary[100]}`
    },
    '& .invisibleWebkitScrollbar': {
      scrollbarColor: 'transparent transparent'
    },
    '& .invisibleWebkitScrollbar::-webkit-scrollbar': {
      backgroundColor: 'transparent'
    },
    '& .invisibleWebkitScrollbar::-webkit-scrollbar-thumb': {
      backgroundColor: 'transparent',
      boxShadow: 'none'
    },
    // borders
    border: 0,
    '& .MuiDataGrid-columnHeaders': {
      borderBottom: 0,
      transition: 'box-shadow .2s',
      zIndex: 2,
      // sticky header
      '&$stickyHeader': {
        background: theme.palette.common.white,
        boxShadow: theme.shadows[7],
        '& .MuiDataGrid-pinnedColumnHeaders': {
          boxShadow: 'none'
        }
      }
    },
    '& .MuiDataGrid-columnsContainer, & .MuiDataGrid-cell': {
      borderBottomColor: theme.palette.primary[200]
    },
    '& .MuiDataGrid-row:last-child .MuiDataGrid-cell': {
      borderBottom: 0
    },
    // column headers
    '& .MuiDataGrid-columnHeaders, .MuiDataGrid-columnHeadersInner': {
      height: '100%' // for correct column hovering
    },
    '& .MuiDataGrid-columnHeader': {
      padding: 0,
      height: '100%',
      '&$hoverableColumn': {
        // column hover and dragging
        '&:hover, &.MuiDataGrid-columnHeader--moving': {
          backgroundColor: theme.palette.secondary[100]
        }
      },
      '& .MuiDataGrid-columnHeaderTitleContainer': {
        padding: 0
      },
      '& .MuiIconButton-root': {
        padding: theme.spacing(0.5),
        '&:hover': {
          background: 'none'
        }
      },
      // drag-n-drop separator icon
      '&, &[data-field="__check__"], &[data-field="__detail_panel_toggle__"]': {
        '& .MuiDataGrid-columnSeparator--sideRight': {
          right: theme.spacing(-0.875),
          color: 'transparent'
        }
      },
      '&$resizableColumn:hover .MuiDataGrid-columnSeparator--sideRight': {
        color: theme.palette.secondary[500]
      }
    },
    '& .MuiDataGrid-columnHeader, & .MuiDataGrid-cell': {
      '&:focus-within': {
        outline: 'none'
      },
      '&$hoverableColumn': {
        padding: theme.spacing(0, 2)
      },
      '&$firstColumn': {
        padding: theme.spacing(0, 2),
        // move closer to checkboxes
        '&[aria-colindex="2"]': {
          paddingLeft: theme.spacing(1)
        }
      }
    },
    '& .MuiDataGrid-columnHeader--filtered:not(.MuiDataGrid-columnHeader--sorted):not(:hover)': {
      '& .MuiDataGrid-iconButtonContainer': {
        visibility: 'hidden',
        width: 0
      }
    },
    '& .MuiDataGrid-columnHeader--sorted': {
      '& $columnHeaderTitle, & $arrowIcon': {
        color: theme.palette.secondary[500]
      }
    },
    // pinned columns
    '& .MuiDataGrid-pinnedColumnHeaders--left, & .MuiDataGrid-pinnedColumns--left': {
      backgroundColor: theme.palette.common.white,
      boxShadow: theme.shadows[2],
      clipPath: `inset(${theme.spacing(-1.5, -1.5, 0)})`
    },
    '& .MuiDataGrid-pinnedColumnHeaders--right, & .MuiDataGrid-pinnedColumns--right': {
      backgroundColor: 'transparent',
      boxShadow: 'none'
    },
    '& .MuiDataGrid-pinnedColumnHeaders--right': {
      pointerEvents: 'none'
    },
    // rows
    '& .MuiDataGrid-row': {
      // selected & hovered rows
      '&.Mui-selected': {
        backgroundColor: theme.palette.secondary[100]
      },
      '&.Mui-hovered': {
        position: 'relative',
        backgroundColor: theme.palette.secondary[100],
        boxShadow: `0 -1px 0 0 ${theme.palette.secondary[100]}`,
        '& .MuiDataGrid-cell': {
          borderBottomColor: theme.palette.secondary[100]
        },
        '&.Mui-selected': {
          backgroundColor: theme.palette.secondary[200]
        },
        // actions cell hover effect
        '&$disabledRow $actionsCell': {
          backgroundColor: theme.palette.common.white
        },
        '& #actionsButton': {
          visibility: 'visible',
          opacity: 1
        }
      },
      '&:hover:not(.Mui-hovered)': {
        backgroundColor: 'transparent'
      },
      // treedata grouping
      '&.expandedChildrenRow': {
        '& > .MuiDataGrid-cell': {
          borderBottomColor: 'transparent !important'
        }
      },
      // detail panel
      '&.MuiDataGrid-row--detailPanelExpanded': {
        '& > .MuiDataGrid-cell': {
          position: 'relative',
          backgroundColor: theme.palette.secondary[100],
          boxShadow: `0 -1px 0 0 ${theme.palette.secondary[100]}`,
          borderBottomColor: 'transparent !important'
        }
      },
      '& > .MuiDataGrid-cell > .MuiDataGrid-detailPanelToggleCell': {
        '&:hover': {
          background: 'none'
        },
        '&.Mui-disabled': {
          display: 'none'
        }
      }
    },
    // cells
    '& .MuiDataGrid-cell': {
      padding: theme.spacing(0, 2)
    }
  },
  // skeletonized loading
  dataGridSkeletonizedLoading: {
    '& .MuiDataGrid-columnHeaders, .MuiDataGrid-virtualScroller': {
      overflow: 'hidden',
      pointerEvents: 'none'
    },
    '& .autoHeightStickyHorizontalScroller': {
      display: 'none'
    }
  },
  // sticky header
  dataGridAutoHeightWithStickyHeader: ({ stickyHeaderPositionTop = theme.spacing(8.125) }) => ({
    width: '100%',
    '& > .MuiDataGrid-main': {
      overflow: 'visible',
      '& > div:not([class]):first-of-type': {
        height: `calc(100% - ${theme.spacing(6)}) !important`
      },
      '& > .MuiDataGrid-columnHeaders': {
        background: theme.palette.common.white,
        position: 'sticky',
        top: stickyHeaderPositionTop,
        zIndex: 3
      },
      '& > div:not([class]) > .MuiDataGrid-virtualScroller': {
        marginTop: '0 !important',
        '& > .MuiDataGrid-virtualScrollerContent': {
          marginBottom: theme.spacing(0.5)
        }
      }
    }
  }),
  columnHeaderTitle: {
    ...theme.typography.interactive1,
    whiteSpace: 'normal'
  },
  actionsCell: {
    position: 'relative'
  },
  disabledRow: {
    '&:hover, &.Mui-hovered, &.Mui-selected': {
      backgroundColor: `transparent !important`,
      // pinned actions hover effect
      '& .colType--actions': {
        backgroundColor: theme.palette.common.white
      }
    },
    '& .MuiDataGrid-cell > *': {
      opacity: 0.5
    }
  },
  // helper classes
  allowedColumn: {
    backgroundColor: alpha(theme.palette.success[200], 0.3)
  },
  firstColumn: {
    position: 'relative',
    overflow: 'visible !important'
  },
  hoverableColumn: {},
  hoveredCell: {
    backgroundColor: theme.palette.secondary[100]
  },
  pinnableColumn: {},
  resizableColumn: {},
  stickyHeader: {},
  // PAGINATION
  paginationContainer: {
    height: theme.spacing(8),
    '&[hidden]': {
      display: 'none'
    }
  },
  paginationContainerInner: {
    height: theme.spacing(8),
    padding: theme.spacing(2, 0),
    '&.stickyPaginationContainerInner': {
      position: 'fixed',
      bottom: 0,
      zIndex: 3,
      backgroundColor: theme.palette.common.white,
      boxShadow: theme.shadows[13]
    }
  },
  paginationRoot: {
    justifyContent: 'initial'
  },
  backToTop: {
    marginInlineStart: 'auto',
    color: theme.palette.secondary[500],
    '&, &:hover': {
      backgroundColor: theme.palette.secondary[200]
    }
  }
}));

export default createClasses;