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

export const styles = {
  container: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    overflow: 'hidden',
    width: 'fit-content',

    '&.inline': {
      flexDirection: 'column',
      alignItems: 'flex-start',
      gap: ({ spacing }) => spacing(1),
    },
  },
  actions: {
    icon: {
      width: ({ spacing }) => spacing(4),
      height: ({ spacing }) => spacing(4),
      borderRadius: 0,
      '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
        borderRadius: 0,
      },
    },
  },
  options: {
    menu: {
      paddingY: ({ spacing }) => spacing(1),
      '&.inline': {
        boxShadow: 'none',
        backgroundColor: 'transparent',
        borderRadius: ({ spacing }) => spacing(0.5),

        '& .MuiDivider-root': {
          height: ({ spacing }) => spacing(4),

          '&.MuiToggleButtonGroup-groupedHorizontal': {
            height: ({ spacing }) => spacing(4),
          },
          '&.MuiToggleButtonGroup-groupedVertical': {
            height: 'auto',
            width: ({ spacing }) => spacing(4),
            margin: ({ spacing }) => `${spacing(0.5, 0, 1)} !important`,
            borderRadius: '0 !important',
          },
        },

        '& .MuiToggleButton-sizeSmall': {
          margin: 0,

          '&.MuiToggleButtonGroup-grouped:not(.MuiDivider-root)': {
            margin: 0,
          },
          '& + .MuiDivider-root.MuiToggleButtonGroup-groupedHorizontal': {
            height: ({ spacing }) => spacing(3),
          },
          '& + .MuiDivider-root.MuiToggleButtonGroup-groupedVertical': {
            height: 'auto',
            width: ({ spacing }) => spacing(3),
          },
        },

        '.MuiToggleButtonGroup-grouped:not(.MuiDivider-root)': {
          margin: 0,

          '&:first-of-type': {
            marginLeft: 0,
          },
          '&:not(:last-of-type)': {
            marginRight: ({ spacing }) => spacing(0.5),
          },
        },
        '&.MuiToggleButtonGroup-horizontal:not(.MuiDivider-root)': {
          '.MuiToggleButtonGroup-grouped': {
            margin: ({ spacing }) => spacing(0, 0.5),
          },
        },
        '&.MuiToggleButtonGroup-vertical:not(.MuiDivider-root)': {
          '.MuiToggleButtonGroup-grouped': {
            margin: ({ spacing }) => spacing(0, 0, 0.5),

            '&:not(:last-of-type)': {
              marginRight: 0,
            },
            '&:last-of-type': {
              marginBottom: 0,
            },
          },
        },
      },
    },
    icon: {
      borderRadius: 0,
      width: ({ spacing }) => spacing(3),
    },
    title: {
      paddingX: ({ spacing }) => spacing(2),
      paddingBottom: ({ spacing }) => spacing(0.5),

      '&.inline': {
        paddingX: 0,
        paddingBottom: 0,
      },
    },
    icons: {
      color: ({ palette }) => palette.text.primary,
    },
    tag: {
      borderRadius: ({ spacing }) => spacing(0.25),
      border: '1px solid',
      borderColor: ({ palette }) => palette.primary.main,
      paddingX: ({ spacing }) => spacing(0.5),
      color: ({ palette }) => palette.primary.main,
      backgroundColor: ({ palette }) => alpha(palette.primary.main, 0.08),
    },
    more: {
      width: ({ spacing }) => spacing(4),
    },
  },
  chip: {
    container: {
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      gap: ({ spacing }) => spacing(0.5),
      overflowX: 'auto',
      scrollbarWidth: 'none',
      paddingX: ({ spacing }) => spacing(1),

      '&.inline': {
        overflowX: 'visible',
        flexWrap: 'wrap',
      },
    },
    chip: {
      marginRight: ({ spacing }) => spacing(0.5),
    },
    disabled: {
      opacity: ({ palette }) => palette.action.disabledOpacity,
    },
  },
} satisfies Record<string, SxProps<Theme>>