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

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

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

import {
  type CsatSurveyTemplate,
  type SurveyQuestion,
  SurveyQuestionType,
} from 'src/pages/dashboard/serviceManagement/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CsatCommentQuestionResponse from './Comment/CsatCommentQuestionResponse';
import CsatRatingQuestionResponse from './Rating/CsatRatingQuestionResponse';
import CsatSingleChoiceQuestionResponse from './SingleChoice/CsatSingleChoiceQuestionResponse';

type Props = {
  template: CsatSurveyTemplate;
};

const SurveyResponse: FC<Props> = ({ template }) => {
  const { t } = useLokaliseTranslation('service_management');

  const getQuestionResponseByType = useCallback((question: SurveyQuestion) => {
    if (!question.value) {
      return null;
    }

    let QuestionComponent = null;

    switch (question.type) {
      case SurveyQuestionType.RATING:
        QuestionComponent = (
          <CsatRatingQuestionResponse questionResponse={question} />
        );
        break;
      case SurveyQuestionType.SINGLE_SELECTION:
        QuestionComponent = (
          <CsatSingleChoiceQuestionResponse questionResponse={question} />
        );
        break;
      case SurveyQuestionType.COMMENT:
        QuestionComponent = (
          <CsatCommentQuestionResponse questionResponse={question} />
        );
        break;
    }

    return (
      <CardContainer
        key={question.id}
        fullWidth
        sx={{
          backgroundColor: theme => theme.palette.new.background.layout.default,
        }}
      >
        {QuestionComponent}
      </CardContainer>
    );
  }, []);

  return (
    <Accordion
      title={t('csat_survey_response_title')}
      sx={{ padding: 0 }}
      disableGutters
      elevation={0}
      customDetail={
        <Stack sx={{ gap: 2 }}>
          {template.csatQuestions.map(q => getQuestionResponseByType(q))}
        </Stack>
      }
    />
  );
};

export default SurveyResponse;
