import React from "react";
import { View } from "react-native";
import { useStyles } from "./FileView.style";
import { Icon } from "../../../Icon";
import { Text } from "../../../Text";
import type { FormattedFile } from "../../types";
import { StatusCode } from "../../types";
import {
  computeA11yLabel,
  mapFileTypeToIconName,
  sanitizeFileName,
  truncateFileNameForLine,
} from "../../utils";
import { ProgressBar } from "../ProgressBar";
import { ErrorIcon } from "../ErrorIcon";
import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";

interface FileViewProps {
  readonly accessibilityLabel?: string;
  readonly showOverlay: boolean;
  readonly showError: boolean;
  readonly file: FormattedFile;
  readonly styleInGrid: boolean;
  readonly onUploadComplete: () => void;
  readonly surfaceColor?: string;
}

export function FileView({
  accessibilityLabel,
  styleInGrid,
  file,
  showOverlay,
  showError,
  onUploadComplete,
  surfaceColor,
}: FileViewProps) {
  const { t } = useAtlantisI18n();
  const styles = useStyles();

  const a11yLabel = computeA11yLabel({
    accessibilityLabel,
    showOverlay,
    showError,
    t,
  });

  const freezeProgressBar =
    file.status !== StatusCode.Completed && file.progress >= 0.9;

  return (
    <View
      style={[
        styles.fileBackground,
        styleInGrid ? styles.fileBackgroundGrid : styles.fileBackgroundFlat,
        surfaceColor ? { backgroundColor: surfaceColor } : undefined,
      ]}
      accessible={true}
      accessibilityLabel={a11yLabel}
    >
      <View
        style={[
          styles.fileBackground,
          styleInGrid ? styles.fileIconGrid : styles.fileIconFlat,
        ]}
        testID={"test-file"}
      >
        {(styleInGrid || !showError) && file.showFileTypeIndicator && (
          <Icon
            size={"large"}
            name={mapFileTypeToIconName({
              fileName: file.name,
              fileType: file.type,
            })}
          />
        )}
      </View>
      <View
        style={[
          showError && styleInGrid ? styles.fileNameError : styles.fileName,
          styleInGrid ? styles.fileNameGrid : styles.fileNameFlat,
        ]}
      >
        <Text level="textSupporting" variation="subdued" maxLines="single">
          {styleInGrid
            ? truncateFileNameForLine(sanitizeFileName(file.name))
            : sanitizeFileName(file.name)}
        </Text>
      </View>
      {!showError && showOverlay && (
        <View
          style={[styles.fileBackground, styles.overlay, styles.fileOverlay]}
          testID="format-file-progress-bar-container"
        >
          <ProgressBar
            status={file.status}
            progress={freezeProgressBar ? 0.9 : file.progress}
            onComplete={onUploadComplete}
          />
        </View>
      )}
      {showError && (
        <View
          style={[
            styles.fileBackground,
            styles.overlayError,
            styles.fileOverlay,
          ]}
          testID="format-file-error-container"
        >
          <View style={!styleInGrid ? styles.iconCenter : undefined}>
            <ErrorIcon />
          </View>
        </View>
      )}
    </View>
  );
}