import Stack from '@material-hu/mui/Stack';

import PdfVisualizer from '@material-hu/components/composed-components/PdfVisualizer';
import TaskFocusHeader from '@material-hu/components/design-system/Header/TaskFocus';
import Spinner from '@material-hu/components/design-system/ProgressIndicators/Spinner';

import { FileExtensions } from 'src/constants/files';

import FocusFileVisualizerContentImage from './FocusFileVisualizerContentImage';
import FocusFileVisualizerContentNotAvailable from './FocusFileVisualizerContentNotAvailable';
import useFileUrl from './hooks/useFileUrl';

export const IMG_FILE_EXTENSIONS = [
  FileExtensions.JPG,
  FileExtensions.JPEG,
  FileExtensions.PNG,
  FileExtensions.GIF,
  FileExtensions.WEBP,
] as string[];

type FocusFileVisualizerContentProps = {
  fileName: string;
  fileSource: string;
  fileExtension: string;
  onClose: () => void;
};

const FocusFileVisualizerContent = ({
  fileName,
  fileSource,
  fileExtension,
  onClose,
}: FocusFileVisualizerContentProps) => {
  const { data: fileUrl, isLoading } = useFileUrl(fileSource, {
    onError: onClose,
  });

  const isPdf = fileExtension.toLowerCase() === FileExtensions.PDF;
  const isImage = IMG_FILE_EXTENSIONS.includes(fileExtension.toLowerCase());
  const isNotAvailableFile = !isPdf && !isImage;

  return (
    <>
      <TaskFocusHeader
        title={fileName}
        onClose={onClose}
      />

      <Stack
        sx={{
          flex: 1,
          overflow: 'hidden',
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: theme => theme.palette.new.background.layout.default,
        }}
      >
        {isLoading && <Spinner />}

        {fileUrl && (
          <>
            {isPdf && <PdfVisualizer file={fileUrl} />}

            {isImage && <FocusFileVisualizerContentImage source={fileUrl} />}

            {isNotAvailableFile && (
              <FocusFileVisualizerContentNotAvailable
                source={fileSource}
                fileName={fileName}
              />
            )}
          </>
        )}
      </Stack>
    </>
  );
};

export default FocusFileVisualizerContent;