import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {IconCertificate, IconCheck} from '@tabler/icons-react-native';
import Confetti from '@assets/learning/confetti.svg';
import HuIcon from '@assets/hu.svg';
import {
  Button,
  CardContainer,
  Skeleton,
  Spinner,
  Typography,
} from '@components';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import LessonHeader from '@modules/learning/components/LessonHeader';
import {useUser} from '@redux/selectors';
import {useTheme} from '@shared/theme';
import {isAndroid} from '@shared/utils';

import {styles} from './styles';

interface EndOfCourseProps {
  title: string;
  isCourseFinished: boolean;
  onClose: () => void;
  canGetCertificate: boolean;
  getCertificate: () => void;
  certificateLoading: boolean;
}

function EndOfCourse({
  title,
  isCourseFinished,
  onClose,
  canGetCertificate,
  getCertificate,
  certificateLoading,
}: EndOfCourseProps) {
  const {t} = useTranslation();
  const user = useUser();
  const firstName = user?.firstName;
  const {theme, iconSizes, spacing} = useTheme();
  const {top, bottom} = useSafeAreaInsets();
  const paddingBottom = useSafeAreaBottomPadding();

  const translations = {
    title: isCourseFinished
      ? {
          translation: 'learning.course.completed.title',
          params: {userName: firstName},
        }
      : {
          translation: 'learning.course.incomplete.title',
          params: {title},
        },
    body: isCourseFinished
      ? {
          translation: 'learning.course.completed.description',
          params: {courseName: title},
        }
      : {
          translation: 'learning.course.incomplete.description',
          params: {title},
        },
  };

  return (
    <View
      style={[
        styles.flex,
        {
          paddingTop: top,
          paddingBottom: bottom,
          backgroundColor: theme.white,
        },
      ]}>
      <LessonHeader hideProgressBar title={title} onClose={onClose} />
      <View
        style={[
          styles.body,
          !isCourseFinished && styles.bodyCentered,
          {
            backgroundColor: theme.background.layout.default,
          },
        ]}>
        {isCourseFinished && <Confetti />}
        <View style={styles.title}>
          {!isCourseFinished && (
            <View
              style={[
                styles.iconContainer,
                {backgroundColor: theme.background.feedback.success},
              ]}>
              <IconCheck
                color={theme.text.feedback.success}
                size={iconSizes.x9}
              />
            </View>
          )}
          <Typography weight="semiBold" align="center" numberOfLines={2}>
            {t(translations.title.translation, translations.title.params)}
          </Typography>
          <Typography align="center">
            {t(translations.body.translation, translations.body.params)}
          </Typography>
        </View>
        {canGetCertificate && (
          <View style={styles.cardContainer}>
            <CardContainer
              footer={{
                primaryText: t('learning.common.view_certificate'),
                onPrimaryPress: getCertificate,
                primaryVariant: 'tertiary',
              }}>
              {certificateLoading ? (
                <View style={styles.spinnerContainer}>
                  <Spinner />
                </View>
              ) : (
                <View style={styles.cardContainerBody}>
                  <IconCertificate
                    size={iconSizes.x9}
                    color={theme.text.neutral.brand}
                  />
                  <Typography align="center" color={theme.text.neutral.brand}>
                    {t('learning.common.your_certificate')}
                  </Typography>
                  <Skeleton.Item height={spacing.x2} width="80%" />
                  <Skeleton.Item height={spacing.x2} width="60%" />
                  <HuIcon />
                </View>
              )}
            </CardContainer>
          </View>
        )}
      </View>
      <View style={styles.bottomRow}>
        <View
          style={[
            styles.bottomContainer,
            isAndroid ? {paddingBottom} : styles.noPadding,
          ]}>
          <Button
            text={t('learning.course.go_back_to_courses')}
            onPress={onClose}
          />
        </View>
      </View>
    </View>
  );
}

export default EndOfCourse;