import React, { useEffect, useRef, useState } from "react";
import { ImageBackground, View } from "react-native";
import { useStyles } from "./MediaView.style";
import type { FormattedFile } from "../../types";
import { StatusCode } from "../../types";
import { computeA11yLabel } from "../../utils";
import { ActivityIndicator } from "../../../ActivityIndicator";
import { Icon } from "../../../Icon";
import { ProgressBar } from "../ProgressBar";
import { ErrorIcon } from "../ErrorIcon";
import { useAtlantisFormatFileContext } from "../../context/FormatFileContext";
import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";

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

// eslint-disable-next-line max-statements
export function MediaView({
  accessibilityLabel,
  showOverlay,
  showError,
  file,
  styleInGrid,
  onUploadComplete,
  onLoadEnd,
  surfaceColor,
}: MediaViewProps) {
  const { t } = useAtlantisI18n();
  const { useCreateThumbnail } = useAtlantisFormatFileContext();
  const { thumbnail, error } = useCreateThumbnail(file);
  const [isLoading, setIsLoading] = useState(false);
  const [decodeFailed, setDecodeFailed] = useState(false);
  /**
   * Tracks whether onLoadEnd has fired to prevent race conditions.
   * ImageBackground can fire onLoadEnd before onLoadStart when loading cached images,
   * which would cause isLoading to get stuck at true, showing an infinite spinner.
   */
  const hasLoadedRef = useRef(false);
  const hasNotifiedLoadEndRef = useRef(false);

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

  const hasError = showError || error,
    uri = thumbnail || file.thumbnailUrl || file.source,
    styles = useStyles();

  const handleLoadStart = () => {
    if (!hasLoadedRef.current) {
      setIsLoading(true);
    }
  };

  const handleLoadEnd = () => {
    hasLoadedRef.current = true;
    setIsLoading(false);
  };

  const handleMediaLoadEnd = () => {
    handleLoadEnd();

    if (!hasNotifiedLoadEndRef.current) {
      hasNotifiedLoadEndRef.current = true;
      onLoadEnd?.();
    }
  };

  useEffect(() => {
    hasLoadedRef.current = false;
    hasNotifiedLoadEndRef.current = false;
    setIsLoading(false);
    setDecodeFailed(false);
  }, [uri]);

  if (isVideo(file.type) && (!uri || decodeFailed)) {
    return (
      <VideoPlaceholder
        a11yLabel={a11yLabel}
        styleInGrid={styleInGrid}
        surfaceColor={surfaceColor}
        styles={styles}
        isLoading={isLoading}
        showOverlay={showOverlay}
        hasError={hasError}
        file={file}
        onUploadComplete={onUploadComplete}
      />
    );
  }

  return (
    <View
      accessible={true}
      accessibilityLabel={a11yLabel}
      style={surfaceColor ? { backgroundColor: surfaceColor } : undefined}
    >
      <ImageBackground
        style={[
          styles.imageBackground,
          styleInGrid ? styles.imageBackgroundGrid : styles.imageBackgroundFlat,
        ]}
        resizeMode={styleInGrid ? "cover" : "contain"}
        source={{ uri }}
        testID={"test-image"}
        onLoadStart={handleLoadStart}
        onLoadEnd={handleMediaLoadEnd}
        onError={() => {
          handleMediaLoadEnd();
          setDecodeFailed(true);
        }}
      >
        <Overlay
          isLoading={isLoading}
          showOverlay={showOverlay}
          hasError={hasError}
          file={file}
          onUploadComplete={onUploadComplete}
          styles={styles}
          styleInGrid={styleInGrid}
        />
      </ImageBackground>
    </View>
  );
}

interface OverlayProps {
  readonly isLoading: boolean;
  readonly showOverlay: boolean;
  readonly hasError: boolean;
  readonly file: FormattedFile;
  readonly onUploadComplete: () => void;
  readonly styles: ReturnType<typeof useStyles>;
  readonly styleInGrid: boolean;
}

function Overlay({
  isLoading,
  showOverlay,
  hasError,
  file,
  onUploadComplete,
  styles,
  styleInGrid,
}: OverlayProps) {
  if (isLoading) {
    return <ActivityIndicator size={styleInGrid ? "small" : "base"} />;
  }

  if (hasError) return <ErrorOverlay styles={styles} />;

  if (showOverlay) {
    return (
      <ProgressOverlay
        status={file.status}
        progress={file.progress}
        onUploadComplete={onUploadComplete}
        styles={styles}
      />
    );
  }

  if (isVideo(file.type) && file.showFileTypeIndicator) {
    return <Icon name="video" color="white" />;
  }

  return null;
}

interface ProgressOverlayProps {
  readonly status: StatusCode;
  readonly progress: number;
  readonly onUploadComplete: () => void;
  readonly styles: ReturnType<typeof useStyles>;
}

function ProgressOverlay({
  status,
  progress,
  onUploadComplete,
  styles,
}: ProgressOverlayProps) {
  const freezeProgressBar = status !== StatusCode.Completed && progress >= 0.9;

  return (
    <View
      style={[styles.imageBackground, styles.overlay]}
      testID="format-file-progress-bar-container"
    >
      <ProgressBar
        status={status}
        progress={freezeProgressBar ? 0.9 : progress}
        onComplete={onUploadComplete}
      />
    </View>
  );
}

function ErrorOverlay({
  styles,
}: {
  readonly styles: ReturnType<typeof useStyles>;
}) {
  return (
    <View
      style={[styles.imageBackground, styles.overlayError]}
      testID="format-file-error-container"
    >
      <ErrorIcon />
    </View>
  );
}

function isVideo(fileType = ""): boolean {
  return fileType.includes("video");
}

interface VideoPlaceholderProps {
  readonly a11yLabel: string;
  readonly styleInGrid: boolean;
  readonly surfaceColor?: string;
  readonly styles: ReturnType<typeof useStyles>;
  readonly isLoading: boolean;
  readonly showOverlay: boolean;
  readonly hasError: boolean;
  readonly file: FormattedFile;
  readonly onUploadComplete: () => void;
}

function VideoPlaceholder({
  a11yLabel,
  styleInGrid,
  surfaceColor,
  styles,
  isLoading,
  showOverlay,
  hasError,
  file,
  onUploadComplete,
}: VideoPlaceholderProps) {
  return (
    <View
      accessible={true}
      accessibilityLabel={a11yLabel}
      style={[
        styles.imageBackground,
        styleInGrid ? styles.imageBackgroundGrid : styles.imageBackgroundFlat,
        surfaceColor ? { backgroundColor: surfaceColor } : undefined,
      ]}
      testID={"format-file-video-placeholder"}
    >
      {file.showFileTypeIndicator && <Icon name="videoFile" size="large" />}
      <PlaceholderStatusOverlay
        isLoading={isLoading}
        showOverlay={showOverlay}
        hasError={hasError}
        file={file}
        onUploadComplete={onUploadComplete}
        styles={styles}
        styleInGrid={styleInGrid}
      />
    </View>
  );
}

function PlaceholderStatusOverlay({
  isLoading,
  showOverlay,
  hasError,
  file,
  onUploadComplete,
  styles,
  styleInGrid,
}: OverlayProps) {
  if (isLoading) {
    return <ActivityIndicator size={styleInGrid ? "small" : "base"} />;
  }

  if (hasError) return <ErrorOverlay styles={styles} />;

  if (showOverlay) {
    return (
      <ProgressOverlay
        status={file.status}
        progress={file.progress}
        onUploadComplete={onUploadComplete}
        styles={styles}
      />
    );
  }

  return null;
}