import DataDescription from '../../components/DataDescription';
import DataLabel from '../../components/DataLabel';
import type { ItemDataProps } from '../../types';
import { FileDataDocumentEditActions } from './components/FileDataDocumentEditActions';
import { FileDataDocumentEmptyUpload } from './components/FileDataDocumentEmptyUpload';
import { FileDataDocumentLink } from './components/FileDataDocumentLink';
import { FileDataDocumentNoValue } from './components/FileDataDocumentNoValue';
import { useFileDataDocument } from './hooks/useFileDataDocument';

export const FileDataDocument = (props: ItemDataProps) => {
  const fd = useFileDataDocument(props);
  const readonly = props.onlyShow || !props.structure.editable;

  if (readonly) {
    return (
      <>
        <DataLabel {...props} />
        {fd.hasValue ? (
          <FileDataDocumentLink fileName={fd.fileName} />
        ) : (
          <FileDataDocumentNoValue />
        )}
        <DataDescription {...props} />
      </>
    );
  }

  if (fd.hasValue) {
    return (
      <>
        <DataLabel {...props} />
        <div>
          <FileDataDocumentLink fileName={fd.fileName} />
          <FileDataDocumentEditActions
            uploading={fd.uploading}
            buttonTitle={fd.buttonTitle}
            isMobile={fd.isMobile}
            col={fd.col}
            onDelete={fd.delFile}
            onUpload={fd.onUploadNewFile}
            onCopyLink={fd.onCopyLink}
          />
        </div>
        <DataDescription {...props} />
      </>
    );
  }

  return (
    <>
      <DataLabel {...props} />
      <FileDataDocumentEmptyUpload
        uploading={fd.uploading}
        buttonTitle={fd.buttonTitle}
        isMobile={fd.isMobile}
        col={fd.col}
        onUpload={fd.onUploadNewFile}
      />
      <DataDescription {...props} />
    </>
  );
};
