import { InlineFileInput } from './index.js'
import { useClient } from '@based/react'
import { useToast } from '../Toast/index.js'

export const Default = () => {
  const client = useClient()
  const toast = useToast()
  return (
    <>
      <InlineFileInput
        onChange={async (files) => {
          await Promise.allSettled(
            files.map(async (file) => {
              const res = await client.stream('db:file-upload', {
                contents: file,
                fileName: file.name,
                mimeType: file.type,
              })
              toast(`✅ uploaded file: ${JSON.stringify(res)}`)
            }),
          )
        }}
      >
        Upload a file
      </InlineFileInput>
      <InlineFileInput
        multiple
        onChange={async (files) => {
          await Promise.allSettled(
            files.map(async (file) => {
              const res = await client.stream('db:file-upload', {
                contents: file,
                fileName: file.name,
                mimeType: file.type,
              })
              toast(`✅ uploaded file: ${JSON.stringify(res)}`)
            }),
          )
        }}
      >
        Upload multiple files
      </InlineFileInput>
    </>
  )
}
