import React from 'react';
import {ScrollView, View} from 'react-native';
import {HtmlRender} from '@components';
import ActivityIndicator from '@components/ActivityIndicator';
import {SuccessFormParams, UserQuiz} from '@modules/form/interfaces';
import {Screens} from '@shared/constants';

import {styles} from './styles';
import Footer from './components/Footer';
import {Notice} from './interfaces';

interface Props {
  fromScreen: Screens;
  isTrainingArticle?: boolean;
  isOnBoardingArticle?: boolean;
  filledForm: Nullable<UserQuiz>;
  quizId: Nullable<number>;
  loading: boolean;
  notice?: Notice;
  handleCompleteAndFinalize: () => void;
  handleFinalize: (completed?: boolean) => void;
  navigateToSuccessScreen: (routeParams: SuccessFormParams) => void;
  successText: string;
}

/**
 * @deprecated - Delete after old trainings and onboardings modules are removed
 */
function ArticleLayout({
  fromScreen,
  filledForm,
  quizId,
  loading,
  notice,
  handleCompleteAndFinalize,
  handleFinalize,
  navigateToSuccessScreen,
  successText,
}: Props) {
  return loading ? (
    <ActivityIndicator fullScreen />
  ) : (
    <View style={styles.container}>
      {notice?.content && (
        <ScrollView>
          <HtmlRender html={notice.content} withZoom />
        </ScrollView>
      )}
      <Footer
        attachments={notice?.attachments}
        fromScreen={fromScreen}
        quizId={quizId}
        handleCompleteAndFinalize={handleCompleteAndFinalize}
        handleFinalize={handleFinalize}
        filledForm={filledForm}
        successText={successText}
        navigateToSuccessScreen={navigateToSuccessScreen}
      />
    </View>
  );
}

export default ArticleLayout;