//TODO: Add translations for accesibility labels
import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {
  IconCheck,
  IconDownload,
  IconFile,
  IconX,
} from '@tabler/icons-react-native';
import {Avatar, IconButton, Pressable, Spinner, Typography} from '@components';
import {commonStyles} from '@shared/styles';
import {useTheme} from '@shared/theme';
import {bytesToSize, getFileExtension} from '@shared/utils';

import {styles} from './styles';

interface Props {
  onRemoveFile?: () => void;
  onPress?: () => void;
  /**
   * Tap handler for the in-progress download indicator. When provided +
   * `isLoading` is true, the spinner becomes a tappable cancel control
   * (X icon over the spinner) — tapping cancels the in-flight download.
   * Omit to keep the spinner non-interactive.
   */
  onCancel?: () => void;
  bytesSize: number;
  fileName: string;
  isLoading?: boolean;
  showDownload?: boolean;
  showCheck?: boolean;
}

export function FileDisplayer({
  bytesSize,
  fileName,
  onRemoveFile,
  onPress,
  onCancel,
  isLoading,
  showDownload,
  showCheck,
}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const calculatedDisplayableSize = bytesToSize(bytesSize || 0, 2);
  const fileExtension = getFileExtension(fileName || '');
  const accessibilityLabel = `${fileName}, ${
    isLoading ? 'Uploading' : 'Uploaded'
  }`;
  const removeAccessibilityLabel = `${t('general.eliminate')} ${fileName}`;
  return (
    <View style={styles.wrapper}>
      {!!onRemoveFile && (
        <View style={styles.closeContainer}>
          <IconButton
            Icon={IconX}
            onPress={onRemoveFile}
            size="sm"
            variant="tertiary"
            accessibilityLabel={removeAccessibilityLabel}
            accessibilityRole="button"
            backgroundColor={theme.shadow.inverted}
            iconColor={theme.text.neutral.default}
            useGestureHandler
          />
        </View>
      )}
      <Pressable
        onPress={onPress}
        useGestureHandler
        style={[
          styles.container,
          {
            backgroundColor: theme.background.elements.default,
            borderColor: theme.border.neutral.default,
          },
        ]}
        accessible={true}
        accessibilityLabel={accessibilityLabel}
        accessibilityRole="button">
        <View style={styles.innerContainer} accessibilityElementsHidden>
          <Avatar Icon={IconFile} variant="primary" />
          <View style={commonStyles.flex}>
            <Typography
              variant="s"
              weight="semiBold"
              style={styles.name}
              numberOfLines={1}>
              {fileName}
            </Typography>
            <Typography
              variant="xs"
              color={theme.text.neutral.lighter}
              numberOfLines={1}>
              {`${calculatedDisplayableSize} • ${fileExtension}`}
            </Typography>
          </View>
        </View>
        {isLoading ? (
          onCancel ? (
            <Pressable
              onPress={onCancel}
              useGestureHandler
              hitSlop={8}
              accessibilityRole="button"
              accessibilityLabel={t('general.cancel')}
              style={styles.cancelControl}>
              <Spinner />
              <IconX
                size={12}
                color={theme.text.neutral.default}
                style={styles.cancelIcon}
              />
            </Pressable>
          ) : (
            <View accessibilityElementsHidden>
              <Spinner />
            </View>
          )
        ) : showDownload ? (
          <IconDownload color={theme.text.neutral.default} />
        ) : showCheck ? (
          <IconCheck color={theme.brand[400]} />
        ) : null}
      </Pressable>
    </View>
  );
}