import { type FC, type ReactElement } from 'react';

import Stack from '@material-hu/mui/Stack';

export type SizeTypes = 'small' | 'medium' | 'large' | number;

const SIZE_MAPPING: Record<Exclude<SizeTypes, number>, number> = {
  small: 32,
  medium: 40,
  large: 50,
};

const getSizeInPixels = (size: SizeTypes): number => {
  if (typeof size === 'number') return size;
  return SIZE_MAPPING[size];
};

const getIconSizeInPixels = (size: SizeTypes): string => {
  const sizeInPixels = (getSizeInPixels(size) * 3) / 5;
  return `${sizeInPixels}px`;
};

export type ColorTypes =
  | 'success'
  | 'error'
  | 'recommended'
  | 'warning'
  | 'info';

const COLOR_MAPPING = {
  recommended: {
    backgroundColor: '#F9F5FF',
    color: '#42307D',
  },
  error: {
    backgroundColor: '#FFFAEB',
    color: '#7A2E0E',
  },
  success: {
    backgroundColor: '#F0FDF9',
    color: '#134E48',
  },
  info: {
    backgroundColor: '#ECFDFF',
    color: '#164C63',
  },
  warning: {
    backgroundColor: '#FFFAEB',
    color: '#7A2E0E',
  },
};

export type IconRoundedProps = {
  Icon: ReactElement;
  size?: SizeTypes;
  color?: ColorTypes;
};

// TODO: Remove this component once Reports are migrated to the Hugo
// Component used in:
// - src/pages/dashboard/Learning/Courses/Report/components/ColabsMetrics.tsx
// - src/pages/dashboard/Learning/Courses/Report/components/SurveysMetrics.tsx
export const IconRounded: FC<IconRoundedProps> = (props: IconRoundedProps) => {
  const { Icon, size = 'medium', color = 'recommended' } = props;

  return (
    <Stack
      sx={{
        borderRadius: '50%',
        justifyContent: 'center',
        alignItems: 'center',
        width: `${getSizeInPixels(size)}px`,
        height: `${getSizeInPixels(size)}px`,
        ' & > *': {
          fontSize: getIconSizeInPixels(size),
        },
        ...COLOR_MAPPING[color],
      }}
    >
      {Icon}
    </Stack>
  );
};

export default IconRounded;