import React, {useCallback, useLayoutEffect, useState} from 'react';
import {Navigation} from '@interfaces/navigation';
import {useInstanceProp} from '@redux/selectors';
import {Screens} from '@shared/constants';
import {checkEqualStrings, handleFileView, isAndroid} from '@shared/utils';

import FileDisplayer from './components/FileDisplayer';
import HeaderRight from './components/HeaderRight';
import {styles} from './styles';

function FileVisualizer({
  navigation,
  route: {
    params: {file, title},
  },
}: Navigation<Screens.FILE_VISUALIZER>) {
  const hideFileDownload = useInstanceProp('hideFileDownload');
  const [openedFileName, setOpenedFileName] = useState('');
  const isDownloading = checkEqualStrings(openedFileName, file.name);

  const onPressDownload = useCallback(
    () => handleFileView(file, setOpenedFileName),
    [file],
  );

  useLayoutEffect(() => {
    const headerRight = () => (
      <HeaderRight
        isDownloading={isDownloading}
        onPressDownload={onPressDownload}
      />
    );
    navigation.setOptions({
      title: title || file.name,
      headerRight: hideFileDownload ? undefined : headerRight,
      ...(isAndroid && {
        headerTitleContainerStyle: styles.headerTitleContainerStyle,
      }),
    });
  }, [
    title,
    file.name,
    navigation,
    isDownloading,
    onPressDownload,
    hideFileDownload,
  ]);

  return (
    <FileDisplayer
      file={file}
      isDownloading={isDownloading}
      onPressDownload={onPressDownload}
    />
  );
}

export default FileVisualizer;