import DataDescription from '../../components/DataDescription';
import DataLabel from '../../components/DataLabel';
import type { ItemDataProps } from '../../types';
import AudioPlayer from './components/AudioPlayer';
import { FileDataAudioEditActions } from './components/FileDataAudioEditActions';
import { FileDataAudioEmptyUpload } from './components/FileDataAudioEmptyUpload';
import { FileDataAudioNoValue } from './components/FileDataAudioNoValue';
import { useFileDataAudio } from './hooks/useFileDataAudio';

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

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

  if (fd.hasValue) {
    return (
      <>
        <DataLabel {...props} />
        <div>
          <AudioPlayer src={fd.url} />
          <FileDataAudioEditActions
            uploading={fd.uploading}
            buttonTitle={fd.buttonTitle}
            isMobile={fd.isMobile}
            col={fd.col}
            onDelete={fd.delFile}
            onUpload={fd.onUploadNewFile}
            onCopyLink={fd.onCopyLink}
            onRecordAudio={fd.onRecordAudio}
          />
        </div>
        <DataDescription {...props} />
      </>
    );
  }

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