import React, {ReactNode, memo} from 'react';
import {ScrollView, View} from 'react-native';
import LessonDescription from '@modules/learning/components/LessonDescription';
import {Lesson, LessonType} from '@modules/learning/interfaces';
import {useTheme} from '@shared/theme';

import AttachmentList from '../AttachmentList';
import {styles} from './styles';

interface Props {
  lesson: Lesson;
  children: ReactNode;
  renderCheckbox: () => ReactNode;
  type: LessonType;
  insideCheckbox?: boolean;
  isFullScreen?: boolean;
}

function CommonLesson({
  lesson,
  children,
  renderCheckbox,
  insideCheckbox,
  isFullScreen,
}: Props) {
  const {theme} = useTheme();
  return (
    <View
      style={[
        styles.flex,
        {backgroundColor: theme.background.layout.tertiary},
      ]}>
      <ScrollView
        bounces={false}
        style={styles.flex}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.container}>
        {!isFullScreen && (
          <LessonDescription
            title={lesson.title}
            description={lesson.description}
            type={lesson.type}
            attachmentsCount={lesson.attachments.length}
          />
        )}
        {children}
        {!!lesson.attachments.length && !isFullScreen && (
          <AttachmentList attachments={lesson.attachments} />
        )}
        {insideCheckbox && renderCheckbox()}
      </ScrollView>
      {!insideCheckbox && renderCheckbox()}
    </View>
  );
}

export default memo(CommonLesson);