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

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

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

function ChapterDetail({route}: Navigation<Screens.TRAININGS_CHAPTER_DETAIL>) {
  const training = useAppSelector(({trainings}) => trainings.training);
  const {
    id: idParam,
    training: trainingParam,
    fromScreen: fromScreenParam,
    timeAgo,
    sectionId,
  } = route.params;
  const trainingId = training?.id || idParam;
  const chapterId = trainingParam?.id || sectionId;

  const fromScreen =
    fromScreenParam ||
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    (notice?.alreadyDone
      ? Screens.DONE_TRAINING_CHAPTERS
      : Screens.PENDING_TRAINING_CHAPTERS);

  const {filledForm, quizId, loading, notice} = useFetchChapterData({
    fromScreen,
    sectionId,
    trainingId,
    chapterId,
    idParam,
    trainingParam,
    timeAgo,
  });

  useTimeInScreen(AMPLITUDE_EVENTS.TRAINING_SECTION_VIEW, {
    trainingId,
    sectionId: chapterId,
  });

  const {handleCompleteAndFinalize, handleFinalize, navigateToSuccessScreen} =
    useCompleteAndFinalize({
      fromScreen,
      quizId,
      successText,
      trainingId,
      chapterId,
    });

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

export default ChapterDetail;