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

export const styles = {
  root: {
    display: 'flex',
    flexDirection: 'column',
    position: 'relative',
    width: '100%',
  },
  list: {
    display: 'flex',
    flexDirection: 'column',
    gap: (theme: Theme) => theme.spacing(1),
  },
  row: {
    display: 'flex',
    flexDirection: 'column',
    gap: (theme: Theme) => theme.spacing(0.5),
    pointerEvents: 'none',
  },
  rowClickable: {
    pointerEvents: 'auto',
    // display: 'flex',
    // flexDirection: 'column',
    // gap: (theme: Theme) => theme.spacing(0.5),
    // cursor: 'pointer',
    // borderRadius: 1,
    // padding: (theme: Theme) => theme.spacing(0.5),
    // margin: (theme: Theme) => theme.spacing(-0.5),
    // transition: 'background-color 0.15s ease-in-out',
    // '&:hover': {
    //   backgroundColor: (theme: Theme) => theme.palette.action.hover,
    // },
  },
  rowHeader: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  rowLabel: {
    typography: 'body2',
    fontWeight: 'medium',
    color: 'text.primary',
  },
  rowValue: {
    typography: 'body2',
    color: 'text.secondary',
  },
  barContainer: {
    display: 'flex',
    flexDirection: 'column',
  },
  bar: {
    height: 4,
    borderRadius: 2,
    backgroundColor: (theme: Theme) => theme.palette.action.disabledBackground,
    overflow: 'hidden',
    position: 'relative',
    transition: 'background-color 0.15s ease-in-out',
    cursor: 'pointer',
    '&:hover': {
      backgroundColor: (theme: Theme) => theme.palette.action.hover,

      '& > div': {
        filter: 'brightness(1.2)',
      },
    },
  },
  barFill: {
    height: '100%',
    borderRadius: 2,
    transition: 'width 0.3s ease-in-out, background-color 0.15s ease-in-out',
  },
  barFillMuted: {
    backgroundColor: (theme: Theme) => theme.palette.action.disabled,
  },
  legend: {
    display: 'flex',
    alignItems: 'center',
    gap: (theme: Theme) => theme.spacing(2),
    flexWrap: 'wrap',
    paddingTop: (theme: Theme) => theme.spacing(2),
    position: 'sticky',
    bottom: 0,
    backgroundColor: 'background.paper',
    borderTop: (theme: Theme) => `1px solid ${theme.palette.divider}`,
    marginTop: (theme: Theme) => theme.spacing(2),
  },
  legendItem: {
    display: 'flex',
    alignItems: 'center',
    gap: (theme: Theme) => theme.spacing(1),
  },
  legendDot: {
    width: 8,
    height: 8,
    borderRadius: '50%',
  },
  legendLabel: {
    typography: 'caption',
    color: 'text.secondary',
    textTransform: 'uppercase',
    fontWeight: 'medium',
  },
  multiBarRow: {
    display: 'flex',
    alignItems: 'center',
    gap: (theme: Theme) => theme.spacing(1),
  },
  multiBarValue: {
    typography: 'body2',
    color: 'text.secondary',
    minWidth: 48,
    textAlign: 'right',
  },
  multiBarContainer: {
    flex: 1,
  },
  otherRow: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  otherLabel: {
    typography: 'body2',
    fontWeight: 'medium',
    color: 'text.secondary',
    fontStyle: 'italic',
  },
  otherCount: {
    typography: 'body2',
    color: 'text.disabled',
  },
} satisfies Record<string, SxProps<Theme>>