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

export const styles = {
  container: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    gap: ({ spacing }) => spacing(1),
    overflow: 'hidden',
    width: 'fit-content',
  },
  actions: {
    icon: {
      width: ({ spacing }) => spacing(4),
      height: ({ spacing }) => spacing(4),
      borderRadius: 0,
      '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
        borderRadius: 0,
      },
    },
  },
  options: {
    menu: {
      marginTop: ({ spacing }) => spacing(1),
    },
    icon: {
      width: ({ spacing }) => spacing(3),
    },
    title: {
      paddingX: ({ spacing }) => spacing(2),
      paddingY: ({ spacing }) => spacing(0.5),
    },
    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),
    },
    modal: {
      toggle: {
        boxShadow: 'none',
        backgroundColor: '#F8F9F9',
        padding: ({ spacing }) => spacing(0.5),
        marginTop: ({ spacing }) => spacing(2),
        marginBottom: ({ spacing }) => spacing(1),
        '.MuiToggleButtonGroup-grouped': {
          typography: 'caption',
          fontWeight: 500,
          margin: 0,
          '&:first-of-type:not(.MuiDivider-root)': {
            marginLeft: 0,
          },
        },
      },
      subtitle: {
        typography: 'body2',
        color: ({ palette }) => palette.text.secondary,
      },
      optionsGroup: {
        marginLeft: ({ spacing }) => spacing(1),
        typography: 'body2',
      },
      title: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: ({ spacing }) => spacing(2),
      },
      content: {
        paddingX: ({ spacing }) => spacing(2),
        minWidth: ({ spacing }) => spacing(50),
      },
      actions: {
        paddingX: ({ spacing }) => spacing(2),
      },
    },
  },
  chip: {
    chip: {
      marginRight: ({ spacing }) => spacing(0.5),
    },
    disabled: {
      opacity: ({ palette }) => palette.action.disabledOpacity,
    },
  },
} satisfies Record<string, SxProps<Theme>>