import DataDescription from '../../components/DataDescription';
import DataLabel from '../../components/DataLabel';
import type { ItemDataProps } from '../../types';
import { FileDataVideoEditActions } from './components/FileDataVideoEditActions';
import { FileDataVideoEmptyUpload } from './components/FileDataVideoEmptyUpload';
import { FileDataVideoNoValue } from './components/FileDataVideoNoValue';
import VideoPlayer from './components/VideoPlayer';
import { useFileDataVideo } from './hooks/useFileDataVideo';

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

  if (readonly) {
    return (
      <>
        <DataLabel {...props} />
        {fd.hasValue ? <VideoPlayer src={fd.url} /> : <FileDataVideoNoValue />}
        <DataDescription {...props} />
      </>
    );
  }

  if (fd.hasValue) {
    return (
      <>
        <DataLabel {...props} />
        <div>
          <VideoPlayer src={fd.url} />
          <FileDataVideoEditActions
            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} />
      <FileDataVideoEmptyUpload
        uploading={fd.uploading}
        buttonTitle={fd.buttonTitle}
        isMobile={fd.isMobile}
        col={fd.col}
        onUpload={fd.onUploadNewFile}
      />
      <DataDescription {...props} />
    </>
  );
};
