import { FC } from 'react';

import SuccessIcon from '@material-hu/icons/material/Check';
import RejectedIcon from '@material-hu/icons/material/Close';
import Box from '@material-hu/mui/Box';
import { SvgIconProps } from '@material-hu/mui/SvgIcon';
import { useTheme } from '@material-hu/mui/styles';

import { LastTransactionStatus } from 'src/types/forms';

export type StepStatusProps = SvgIconProps & {
  status: LastTransactionStatus | '';
};

const StepStatus: FC<StepStatusProps> = props => {
  const { status, ...iconProps } = props;
  const theme = useTheme();

  const iconSx = {
    width: '1.5em',
    height: '1.5em',
    color: theme.palette.new.text.neutral.default,
  };

  const iconByStatus = {
    [LastTransactionStatus.APPROVED]: (p: SvgIconProps) => (
      <SuccessIcon
        sx={iconSx}
        {...p}
      />
    ),
    [LastTransactionStatus.REJECTED]: (p: SvgIconProps) => (
      <RejectedIcon
        sx={iconSx}
        {...p}
      />
    ),
  };

  return (
    <>
      {iconByStatus[status] ? (
        iconByStatus[status]({
          ...iconProps,
        })
      ) : (
        <Box sx={{ width: '2.5em', height: '2.5em' }} />
      )}
    </>
  );
};

export default StepStatus;