import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {IconCheck} from '@tabler/icons-react-native';
import {Title, Typography} from '@components';
import Footer from '@modules/learning/components/Footer';
import LessonHeader from '@modules/learning/components/LessonHeader';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface EndOfModuleProps {
  title: string;
  isModuleFinished: boolean;
  onClose: () => void;
  onContinue: () => void;
  onBack: () => void;
}

function EndOfModule({
  title,
  isModuleFinished,
  onClose,
  onContinue,
  onBack,
}: EndOfModuleProps) {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();
  const {top, bottom} = useSafeAreaInsets();
  const translations = {
    title: isModuleFinished
      ? 'learning.course.lesson.completed_module_title'
      : 'learning.course.lesson.incomplete_module_title',
    body: isModuleFinished
      ? 'learning.course.lesson.completed_module_description'
      : 'learning.course.lesson.incomplete_module_description',
  };

  return (
    <View
      style={[
        styles.flex,
        {
          paddingBottom: bottom,
          backgroundColor: theme.background.layout.tertiary,
          paddingTop: top,
        },
      ]}>
      <LessonHeader hideProgressBar title={title} onClose={onClose} />
      <View
        style={[
          styles.body,
          {paddingTop: top, backgroundColor: theme.background.layout.default},
        ]}>
        <View
          style={[
            styles.iconContainer,
            {backgroundColor: theme.background.feedback.success},
          ]}>
          <IconCheck color={theme.text.feedback.success} size={iconSizes.x9} />
        </View>
        <Title
          title={t(translations.title, {title})}
          titleNumberOfLines={2}
          center
        />
        <Typography variant="xs" align="center">
          {t(translations.body, {title})}
        </Typography>
      </View>

      <Footer onBackPress={onBack} onNextPress={onContinue} isEnding />
    </View>
  );
}

export default EndOfModule;