import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconSchool} from '@tabler/icons-react-native';
import {
  PressableCardContainer,
  ProgressBar,
  Typography,
  Image,
} from '@components';
import {CourseCategory, CourseStatus} from '@modules/learning/interfaces';
import {showSnackbar} from '@redux/dispatchers';
import {SPACING, useTheme} from '@shared/theme';
import {getDate} from '@shared/utils';

import {styles} from './styles';

interface Props {
  id: number;
  title: string;
  pictureUrl: string | null;
  dueDate: string | null;
  lessonsCompleted?: number;
  totalLessons?: number;
  category?: Nullable<CourseCategory>;
  status: CourseStatus;
  progress: number;
  isObligatory?: boolean;
  onCoursePress: (id: number) => void;
  isBlocked?: boolean;
  showFooter?: boolean;
  secondaryText?: string;
}

function CourseTile({
  id,
  title,
  pictureUrl,
  dueDate,
  category,
  status,
  progress,
  isObligatory,
  onCoursePress,
  isBlocked = false,
  showFooter = true,
  secondaryText,
}: Props) {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const onPress = () => {
    if (isBlocked) {
      showSnackbar({
        title: t('learning.courses.blocked'),
        description: t('learning.courses.blocked_description'),
      });
    } else {
      onCoursePress(id);
    }
  };

  const defaultImage = (
    <View style={styles.imageDefaultContainer}>
      <IconSchool size={SPACING.x5} color={theme.graphics.hugo[400]} />
    </View>
  );
  return (
    <PressableCardContainer
      onPress={onPress}
      style={styles.mainContainer}
      {...(showFooter && {
        footer: {
          ...(!isBlocked && {
            primaryText:
              status === 'FINISHED'
                ? t('learning.course.view')
                : t('general.continue'),
          }),
          primaryVariant: 'tertiary',
          onPrimaryPress: onPress,
          secondaryText,
        },
      })}>
      <View style={styles.container}>
        <View
          style={[
            styles.imageContainer,
            {backgroundColor: theme.background.layout.brand},
          ]}>
          {pictureUrl ? (
            <Image
              enableCache
              source={{uri: pictureUrl}}
              style={[
                styles.image,
                {backgroundColor: theme.background.layout.brand},
              ]}
              loaderType="spinner"
              renderError={defaultImage}
            />
          ) : (
            defaultImage
          )}
        </View>
        <View style={styles.textContainer}>
          {isObligatory && (
            <Typography>
              <Typography variant="xxs" color={theme.text.neutral.lighter}>
                {t(`learning.course.${isObligatory ? 'required' : 'optional'}`)}
              </Typography>
              {dueDate && (
                <Typography variant="xxs" color={theme.text.neutral.lighter}>
                  {` - ${t('learning.common.due_date', {
                    date: getDate(dueDate),
                  })}`}
                </Typography>
              )}
            </Typography>
          )}
          <Typography variant="xs" weight="semiBold" numberOfLines={2}>
            {title}
          </Typography>
          <Typography
            variant="xxs"
            color={theme.text.neutral.lighter}
            numberOfLines={2}>
            {category?.name}
          </Typography>
        </View>
      </View>
      <ProgressBar progress={progress} total={100} showPercentage />
    </PressableCardContainer>
  );
}

export default CourseTile;