import { type FC } from 'react';

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

import HuCircularProgress from '@material-hu/components/design-system/ProgressIndicators/Spinner';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import {
  type CsatSurveyTemplate,
  type Task,
} from 'src/pages/dashboard/serviceManagement/types';

import SurveyForm from './SurveyForm';
import SurveyResponse from './SurveyResponse';

type Props = {
  task: Task;
  isLoading: boolean;
  surveyTemplate?: CsatSurveyTemplate;
  hasRespondedSurvey: boolean;
  includeDivider?: boolean;
};

const CsatSurvey: FC<Props> = ({
  task,
  isLoading,
  surveyTemplate,
  hasRespondedSurvey,
  includeDivider,
}) => {
  const HuGoThemeProvider = useHuGoTheme();
  return (
    <HuGoThemeProvider>
      <Stack sx={{ px: 3 }}>
        {isLoading ? (
          <HuCircularProgress sx={{ mb: 1 }} />
        ) : (
          <Stack sx={{ gap: 2 }}>
            {includeDivider && <Divider />}
            {hasRespondedSurvey ? (
              <SurveyResponse template={surveyTemplate!} />
            ) : (
              <SurveyForm
                task={task}
                template={surveyTemplate!}
              />
            )}
          </Stack>
        )}
      </Stack>
    </HuGoThemeProvider>
  );
};

export default CsatSurvey;
