import {NextPage} from 'next';
import * as React from 'react';
import * as BlobReact from '@tesseract-design/web-blob-react';
import {DefaultLayout} from '@/components/DefaultLayout';
import {Section, Subsection} from '@/components/Section';

const BlobPage: NextPage = () => {
  const [imageFile, setImageFile] = React.useState<File>();
  React.useEffect(() => {
    fetch('/image.png').then((response) => {
      response.blob().then((blob) => {
        setImageFile(new File([blob], 'image.png', {
          type: 'image/png',
        }));
      });
    });
  }, []);

  const [videoFile, setVideoFile] = React.useState<File>();
  React.useEffect(() => {
    fetch('/video.mp4').then((response) => {
      response.blob().then((blob) => {
        setVideoFile(new File([blob], 'video.mp4', {
          type: 'video/mp4',
        }));
      });
    });
  }, []);

  const [audioFile, setAudioFile] = React.useState<File>();
  React.useEffect(() => {
    fetch('/audio.wav').then((response) => {
      response.blob().then((blob) => {
        setAudioFile(new File([blob], 'audio.wav', {
          type: 'audio/wav',
        }));
      });
    });
  }, []);

  return (
    <DefaultLayout>
      <Section title="ImageFilePreview">
        <Subsection title="Single File">
          <BlobReact.ImageFilePreview
            file={imageFile ?? { name: 'image.png', type: 'image/png', metadata: { previewUrl: '/image.png' } }}
            className="sm:h-64"
          />
        </Subsection>
      </Section>
      <Section title="VideoFilePreview">
        <Subsection title="Single File">
          <BlobReact.VideoFilePreview
            file={videoFile}
            className="sm:h-64"
            enhanced
          />
        </Subsection>
      </Section>
      <Section title="AudioFilePreview">
        <Subsection title="Single File">
          <BlobReact.AudioFilePreview
            file={audioFile}
            className="sm:h-64"
            enhanced
          />
        </Subsection>
      </Section>
      <Section title="FileSelectBox">
        <Subsection title="Single File">
          {/*<BlobReact.FileSelectBox*/}
          {/*  border*/}
          {/*  enhanced*/}
          {/*  label="Primary Image"*/}
          {/*  hint="Select any files here"*/}
          {/*  block*/}
          {/*  className="h-64"*/}
          {/*  onChange={(e) => console.log(e.currentTarget.files)}*/}
          {/*/>*/}
        </Subsection>
      </Section>
    </DefaultLayout>
  )
}

export default BlobPage;
