import React from 'react';
import type { Palette, PaletteColor, Theme } from '@mui/material';
import { alertClasses } from '@mui/material';
import type { Components } from '@mui/material/styles';
import {
  CheckCircleOutlineRounded,
  ErrorOutlineRounded,
  InfoOutlined,
  ReportProblemOutlined,
} from '@mui/icons-material';

import { fontSizeLarge, fontSizeMedium, fontSizeSmall, fontSizeXSmall } from '@/mui/components/constants';
import { SHAPE_CIRCULAR, SHAPE_SQUARE, SIZE_LARGE, SIZE_MEDIUM, SIZE_SMALL, SIZE_X_SMALL } from '@/mui/constants';
import { ALPHA_300 } from '@/mui/constants/opacity';

export default function MuiAlert(theme: Theme): Components['MuiAlert'] {
  const blendColor = (colorKey: keyof Palette) => {
    const initialOpacity = ALPHA_300 * 100;
    const colorGroup = theme.palette[colorKey] as PaletteColor;
    const color = colorGroup.main;
    const bg = theme.palette.background.paper;

    return `color-mix(in srgb, ${color} ${initialOpacity}%, ${bg} ${100 - initialOpacity}%)`;
  };

  return {
    defaultProps: {
      iconMapping: {
        info: <InfoOutlined />,
        success: <CheckCircleOutlineRounded />,
        error: <ErrorOutlineRounded />,
        warning: <ReportProblemOutlined />,
      },
    },
    variants: [
      {
        props: { shape: SHAPE_SQUARE },
        style: {
          borderRadius: 0,
        },
      },
      {
        props: { shape: SHAPE_CIRCULAR },
        style: {
          borderRadius: theme.shape.borderRadiusCircular,
        },
      },
      {
        props: { size: SIZE_X_SMALL },
        style: {
          fontSize: fontSizeXSmall,
          padding: '2px 8px',
          [` .${alertClasses.message}`]: {
            paddingTop: 10,
          },
        },
      },
      {
        props: { size: SIZE_SMALL },
        style: {
          fontSize: fontSizeSmall,
          padding: '4px 12px',
          [` .${alertClasses.message}`]: {
            paddingTop: 9,
          },
        },
      },
      {
        props: { size: SIZE_MEDIUM },
        style: {
          fontSize: fontSizeMedium,
          padding: '6px 16px',
          [` .${alertClasses.message}`]: {
            paddingTop: 10,
          },
        },
      },
      {
        props: { size: SIZE_LARGE },
        style: {
          fontSize: fontSizeLarge,
          padding: '8px 24px',
          [` .${alertClasses.message}`]: {
            paddingTop: 8,
          },
        },
      },
    ],
    styleOverrides: {
      outlinedError: {
        backgroundColor: blendColor('error'),
      },
      outlinedWarning: {
        backgroundColor: blendColor('warning'),
      },
      outlinedInfo: {
        backgroundColor: blendColor('info'),
      },
      outlinedSuccess: {
        backgroundColor: blendColor('success'),
      },
      filledError: {
        color: theme.palette.error.contrastText,
      },
      icon: {
        marginRight: theme.spacing(2),

        ...(theme.direction === 'rtl' && {
          marginLeft: theme.spacing(2),
          marginRight: 0,
        }),
      },
      action: {
        padding: theme.spacing(1),
        marginLeft: 'auto',
        marginRight: theme.spacing(-3),

        ...(theme.direction === 'rtl' && {
          marginLeft: theme.spacing(-3),
          marginRight: 'auto',
        }),
      },
    },
  };
}
