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

const BlobPage: NextPage = () => {
  return (
    <DefaultLayout title="Blob">
      <Section title="FileSelectBox">
        <Subsection title="Default">
          <TesseractBlob.FileSelectBox
            label="File"
            name="file"
            border
            placeholder="Select a file"
            onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.files)}}
          />
        </Subsection>
        <Subsection title="Default Multiple">
          <TesseractBlob.FileSelectBox
            label="File"
            name="file"
            border
            multiple
            placeholder="Select a file"
            onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.files)}}
          />
        </Subsection>
        <Subsection title="Enhanced">
          <TesseractBlob.FileSelectBox
            label="File"
            name="file"
            border
            enhanced
            placeholder="Select a file"
            style={{
              height: 256,
            }}
            onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.files)}}
          />
        </Subsection>
        <Subsection title="Enhanced Multiple">
          <TesseractBlob.FileSelectBox
            label="File"
            name="file"
            border
            enhanced
            placeholder="Select a file"
            multiple
            style={{
              height: 256,
            }}
            onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.files)}}
          />
        </Subsection>
      </Section>
    </DefaultLayout>
  )
}

export default BlobPage;