import React, {memo, useMemo} from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {
  IconCircleCheck,
  IconFilter,
  IconFolder,
} from '@tabler/icons-react-native';
import {Pressable, Typography} from '@components/_core';
import {Avatar, IconButton, Spinner, Title} from '@components/_HuGo';
import {useUser} from '@redux/selectors';
import {FILE_TYPES, Screens} from '@shared/constants';
import {getFileNameExtension, getFileNameFromUrl, getDate} from '@shared/utils';
import {useTheme} from '@shared/theme';

import {getFileIcon, getItemTitle} from '../../utils';
import {File as FileType, SignatureStatus} from '../../interfaces';
import {styles, EXTRA_HEIGHT} from './styles';
import {SIGNATURE_TEXT} from './strings';

interface Props {
  item: FileType;
  getSubtitle?: (folderId: number) => string;
  loading?: boolean;
  onPress: () => void;
  searchTerm?: string;
  showParentName?: boolean;
  style?: StyleProp<ViewStyle>;
  withPreview?: boolean;
}

function File({
  item,
  getSubtitle,
  loading,
  onPress,
  searchTerm,
  showParentName,
  style,
  withPreview,
}: Props) {
  const {t} = useTranslation();
  const navigation = useNavigation();
  const {theme, iconSizes} = useTheme();
  const {language} = useUser();
  const {
    name,
    size,
    folderId,
    parentName,
    signatureDate,
    signatureStatus,
    canBeSigned,
    url,
    source,
  } = item;
  const completeName = name || getFileNameFromUrl(source || url);
  const extension = getFileNameExtension(completeName, true);
  const isSignPending = signatureStatus === SignatureStatus.PENDING;
  const hasSignature = [
    SignatureStatus.SIGNED,
    SignatureStatus.SIGNED_IN_AGREEMENT,
    SignatureStatus.SIGNED_IN_DISAGREEMENT,
  ].includes(signatureStatus);
  const fileAvatarProps = getFileIcon(extension);
  const fileTitle = useMemo(
    () => getItemTitle(completeName, searchTerm),
    [completeName, searchTerm],
  );

  const onPreviewFile = () => {
    navigation.navigate(Screens.CSV_PREVIEWER, item);
  };

  return (
    <Pressable
      backgroundColor={theme.background.layout.tertiary}
      disabled={loading}
      onPress={onPress}
      style={[
        styles.container,
        (hasSignature || showParentName) && {height: EXTRA_HEIGHT},
        style,
      ]}>
      <Avatar {...fileAvatarProps} />
      <View style={styles.folderAndName}>
        <Title
          size="s"
          title={fileTitle}
          titleNumberOfLines={2}
          description={getSubtitle?.(folderId) || `${extension} - ${size}`}
        />
        {hasSignature && (
          <View style={styles.bottomTextContainer}>
            <IconCircleCheck
              color={theme.text.feedback.success}
              size={iconSizes.x5}
            />
            <View style={styles.signatureContent}>
              <Typography weight="semiBold" color={theme.text.neutral.lighter}>
                {t(SIGNATURE_TEXT[signatureStatus])}
              </Typography>
              {signatureDate && (
                <Typography color={theme.text.neutral.lighter}>
                  {getDate(signatureDate, language)}
                </Typography>
              )}
            </View>
          </View>
        )}
        {showParentName && (
          <View style={styles.bottomTextContainer}>
            <IconFolder size={iconSizes.x5} />
            <Typography numberOfLines={1} variant="xs">
              {parentName}
            </Typography>
          </View>
        )}
      </View>
      {isSignPending ? (
        <View
          style={[
            styles.signButton,
            {
              backgroundColor: canBeSigned
                ? theme.graphics.hugo[500]
                : theme.background.elements.grey,
            },
          ]}>
          <Typography
            color={
              canBeSigned
                ? theme.text.neutral.inverted
                : theme.text.neutral.disabled
            }
            variant="xs"
            weight="semiBold">
            {t('general.sign')}
          </Typography>
        </View>
      ) : (
        loading && <Spinner />
      )}
      {withPreview && extension === FILE_TYPES.CSV && (
        <IconButton
          Icon={IconFilter}
          onPress={onPreviewFile}
          variant="secondary"
        />
      )}
    </Pressable>
  );
}

export default memo(File);
