import { type PropsWithChildren } from 'react';

import CardContainer from '@material-hu/components/design-system/CardContainer';

import {
  type AnswerResult,
  ChoiceResult,
} from 'src/pages/dashboard/learning/courses/types';
import { getChoiceResult } from 'src/pages/dashboard/learning/courses/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

type AnswerItemProps = PropsWithChildren<{
  choice: string;
  answer: AnswerResult;
}>;

const { CORRECT, INCORRECT, MISSING } = ChoiceResult;

const ChoiceAnswerCard = ({ choice, answer, children }: AnswerItemProps) => {
  const { t } = useLokaliseTranslation();

  const result = getChoiceResult(
    choice,
    answer.answer as string[],
    answer.correctAnswer,
  );

  const badgeContent = () => {
    let props = {
      hasIcon: true,
      label: '',
      type: '' as 'error' | 'success',
    };

    if (result === INCORRECT)
      props = {
        ...props,
        label: t('general:incorrect_one'),
        type: 'error' as 'error',
      };

    if (result === CORRECT || result === MISSING)
      props = {
        ...props,
        label: t('general:correct_one'),
        type: 'success' as 'success',
      };

    return props;
  };

  return (
    <CardContainer
      fullWidth
      key={choice}
      badge={badgeContent()}
      sx={{
        '& .MuiCardContent-root': {
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'flex-start',
          gap: 0.5,
        },
      }}
    >
      {children}
    </CardContainer>
  );
};

export default ChoiceAnswerCard;
