import { FC } from 'react';

import Box from '@material-hu/mui/Box';
import Checkbox from '@material-hu/mui/Checkbox';
import Radio from '@material-hu/mui/Radio';
import Typography from '@material-hu/mui/Typography';

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

const getInput = {
  [InputType.DROPDOWN]: correctAnswer => (
    <Typography>{correctAnswer}</Typography>
  ),
  [InputType.CHECKBOX]: (correctAnswer, multipleAnswer) =>
    multipleAnswer ? (
      <>
        <Checkbox
          checked
          disabled
          sx={{ pl: 0 }}
        />
        <Typography>{correctAnswer}</Typography>
      </>
    ) : (
      <>
        <Radio
          checked
          disabled
          sx={{ p: 1 }}
        />
        <Typography>{correctAnswer}</Typography>
      </>
    ),
};

export type GetAnswerInputComponentProps = {
  inputType: InputType;
  correctAnswer: string;
  multipleAnswer?: boolean;
};

export const GetAnswerInputComponent: FC<
  GetAnswerInputComponentProps
> = props => {
  const { inputType, correctAnswer, multipleAnswer = false } = props;

  if (!(inputType && getInput[inputType])) {
    return null;
  }

  return (
    <Box sx={{ display: 'flex', alignItems: 'center' }}>
      {getInput[inputType](correctAnswer, multipleAnswer)}
    </Box>
  );
};

export default GetAnswerInputComponent;