import React from 'react';
import {Navigation} from '@interfaces/navigation';
import {FormType} from '@modules/form/interfaces';
import {getFormSuccessString} from '@modules/form/utils';
import ArticleLayout from '@modules/onboarding/components/ArticleLayout';
import {useAppSelector} from '@redux/utils';
import {Screens} from '@shared/constants';

import {useFetchTaskData} from './useFetchTaskData';
import {useCompleteAndFinalize} from './useCompleteAndFinalize';

const successText = getFormSuccessString({type: FormType.QUIZ});

function TaskDetail({
  route: {
    params: {id: idParam, onboarding: onboardingParam, fromScreen},
  },
}: Navigation<Screens.ONBOARDING_TASK_DETAIL>) {
  const onboardingId = useAppSelector(
    ({onboarding}) => onboarding.onboarding?.id,
  );

  const {filledForm, quizId, loading, notice} = useFetchTaskData({
    fromScreen,
    idParam,
    onboardingParam,
  });

  const {handleCompleteAndFinalize, handleFinalize, navigateToSuccessScreen} =
    useCompleteAndFinalize({
      fromScreen,
      quizId,
      successText,
      idParam,
      onboardingId,
    });

  return (
    <ArticleLayout
      fromScreen={fromScreen!}
      filledForm={filledForm}
      quizId={quizId}
      loading={loading}
      notice={notice}
      handleCompleteAndFinalize={handleCompleteAndFinalize}
      handleFinalize={handleFinalize}
      navigateToSuccessScreen={navigateToSuccessScreen}
      successText={successText}
    />
  );
}

export default TaskDetail;