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

import {styles} from './styles';

interface Props {
  path: LearningPathItem;
  onPress: () => void;
}

function PathItem({path, onPress}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();

  const defaultImage = (
    <View
      style={[
        styles.imageDefaultContainer,
        {backgroundColor: theme.background.layout.brand},
      ]}>
      <IconRoute size={SPACING.x8} color={theme.graphics.hugo[400]} />
    </View>
  );

  return path ? (
    <PressableCardContainer onPress={onPress} style={styles.pressableContainer}>
      <View style={styles.imageContainer}>
        {path.pictureUrl ? (
          <Image
            enableCache
            source={{uri: path.pictureUrl}}
            style={styles.image}
            loaderType="spinner"
            renderError={defaultImage}
          />
        ) : (
          defaultImage
        )}
      </View>
      <View style={styles.textContainer}>
        <Typography>
          <Typography variant="xxs" color={theme.text.neutral.lighter}>
            {t(
              `learning.course.${path.isObligatory ? 'required' : 'optional'}`,
            )}
          </Typography>
          {path.dueDate && (
            <Typography variant="xxs" color={theme.text.neutral.lighter}>
              {` - ${t('learning.common.due_date', {
                date: getDate(path.dueDate),
              })}`}
            </Typography>
          )}
        </Typography>
        <Typography variant="s" weight="semiBold" numberOfLines={1}>
          {path.title}
        </Typography>
        <ProgressBar
          style={styles.progressBar}
          progress={path.progress}
          total={100}
          showPercentage
        />
      </View>
    </PressableCardContainer>
  ) : null;
}

export default PathItem;