import type { Theme } from '@mui/material';
import { chipClasses, svgIconClasses } from '@mui/material';
import type { Components, Palette, PaletteColor } from '@mui/material/styles';
import { alpha } from '@mui/material/styles';

import { ALPHA_600, ALPHA_700 } from '@/mui/constants/opacity';

type Variant = {
  props: Record<string, unknown>;
  style: Record<string, unknown>;
};

export default function MuiChip(theme: Theme): Components['MuiChip'] {
  const variants = Object.keys(theme.palette)
    .filter((key) => !!(theme.palette[key as keyof Palette] as PaletteColor).contrastText)
    .reduce<Variant[]>((acc, key) => {
      const isSystemTag = key.startsWith('-tag');
      const mainColor = isSystemTag
        ? (theme.palette[key as keyof Palette] as PaletteColor).contrastText
        : (theme.palette[key as keyof Palette] as PaletteColor).main;

      return acc.concat(
        {
          props: {
            variant: 'text',
            color: key,
          },
          style: {
            color: mainColor,

            [`&.${chipClasses.clickable}:hover`]: {
              backgroundColor: `color-mix(in srgb, currentColor ${theme.palette.action.hoverOpacity * 100}%, transparent)`,
            },
          },
        },
        {
          props: {
            variant: 'outlined',
            color: key,
          },
          style: {
            color: mainColor,
            borderColor: 'currentColor',

            [`&.${chipClasses.clickable}:hover`]: {
              backgroundColor: `color-mix(in srgb, currentColor ${theme.palette.action.hoverOpacity * 100}%, transparent)`,
            },
          },
        },
      );
    }, []);

  return {
    defaultProps: {
      color: 'neutral',
      variant: 'filled',
    },
    variants: [
      {
        props: { variant: 'text' },
        style: {
          backgroundColor: 'transparent',

          [`.${chipClasses.label}`]: {
            color: 'currentColor',
          },

          [`.${chipClasses.deleteIcon}`]: {
            color: 'currentColor',
            opacity: ALPHA_700,

            '&:hover': {
              opacity: 1,
              color: 'currentColor',
            },
          },
        },
      },
      ...variants,
    ],
    styleOverrides: {
      root: {
        position: 'relative',
        gap: 0,

        [`&.${chipClasses.disabled}`]: {
          opacity: ALPHA_600,
        },
      },
      label: {
        lineHeight: 1,
      },
      sizeXSmall: {
        height: 20,
        fontSize: 10,
      },
      labelXSmall: {
        paddingLeft: '10px',
        paddingRight: '10px',
      },
      iconXSmall: {
        fontSize: 18,
      },
      deleteIconXSmall: {
        fontSize: 18,
      },
      sizeSmall: {
        height: 24,
        fontSize: 12,
      },
      labelSmall: {
        paddingLeft: '10px',
        paddingRight: '10px',
      },
      sizeMedium: {
        height: 28,
        fontSize: 13,
      },
      sizeLarge: {
        height: 32,
        fontSize: 14,
      },
      textNeutral: {
        color: theme.palette.shades[900],
        [`&.${chipClasses.clickable}:hover`]: {
          backgroundColor: theme.palette.action.hover,
        },
      },
      filledNeutral: {
        color: theme.palette.shades[900],
        backgroundColor: theme.palette.shades[300],

        [`&.${chipClasses.clickable}:hover`]: {
          backgroundColor: theme.palette.shades[400],
        },
      },
      outlinedNeutral: {
        color: theme.palette.shades[900],
        borderColor: theme.palette.shades[800],

        [`&.${chipClasses.clickable}:hover`]: {
          borderColor: theme.palette.shades[900],
          backgroundColor: theme.palette.action.hover,
        },
      },
      icon: {
        fontSize: 24,
        position: 'relative',
        top: 0,
        verticalAlign: 'middle',
        marginLeft: theme.spacing(0.5),
        marginRight: theme.spacing(-1.5),

        ...(theme.direction === 'rtl' && {
          marginLeft: theme.spacing(-1.5),
          marginRight: theme.spacing(0.5),
        }),
      },
      iconLarge: {
        fontSize: 24,

        marginLeft: theme.spacing(1),
        marginRight: theme.spacing(-1.5),

        ...(theme.direction === 'rtl' && {
          marginLeft: theme.spacing(-1.5),
          marginRight: theme.spacing(1),
        }),
      },
      iconSmall: {
        fontSize: 20,
      },
      avatarXSmall: {
        width: 16,
        height: 16,
        fontSize: 9,
      },
      avatarSmall: {
        width: 20,
        height: 20,
        fontSize: 10,
      },
      avatar: {
        width: 24,
        height: 24,
        fontSize: 12,
        lineHeight: 0,

        marginLeft: theme.spacing(0.5),
        marginRight: theme.spacing(-1.5),

        ...(theme.direction === 'rtl' && {
          marginLeft: theme.spacing(-1.5),
          marginRight: theme.spacing(0.5),
        }),
      },
      avatarLarge: {
        width: 24,
        height: 24,
        fontSize: 12,

        marginRight: theme.spacing(1),
        marginLeft: theme.spacing(-1.5),

        ...(theme.direction === 'rtl' && {
          marginRight: theme.spacing(-1.5),
          marginLeft: theme.spacing(1),
        }),
      },
      deleteIconSmall: {
        fontSize: '20px',
      },
      deleteIcon: {
        fontSize: '24px',
        cursor: 'default',
        verticalAlign: 'middle',
        marginRight: theme.spacing(0.5),
        marginLeft: theme.spacing(-1.5),

        ...(theme.direction === 'rtl' && {
          marginRight: theme.spacing(-1.5),
          marginLeft: theme.spacing(0.5),
        }),

        [`&.${svgIconClasses.root}`]: {
          cursor: 'pointer',
        },

        [`& .${svgIconClasses.root}`]: {
          cursor: 'pointer',
        },
      },
      deleteIconLarge: {
        marginRight: theme.spacing(1),
        marginLeft: theme.spacing(-1.5),

        ...(theme.direction === 'rtl' && {
          marginRight: theme.spacing(-1.5),
          marginLeft: theme.spacing(1),
        }),
      },
      deleteIconColorNeutral: {
        color: alpha(theme.palette.shades[600], 0.7),

        '&:hover': {
          color: theme.palette.shades[600],
        },
      },
    },
  };
}
