import { useClient } from '@based/react'
import { InlineFileInput, useToast } from '@based/ui'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Inline File Input',
  group: 'Inputs',
  section: 'components',
  icon: 'edit',
  component: InlineFileInput,
  subtitle:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  showApi: true,
  showUsage: true,
}

export const blocks: Based.UI.Extractor.BlocksDescriptor[] = [
  {
    name: 'Default',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const client = useClient()
      const toast = useToast()
      return (
        <div style={{ display: 'flex', flexDirection: 'row', gap: 16 }}>
          <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('File uploaded!', {
                    icon: 'checkmark',
                    description: `ID: ${res.id}`,
                  })
                }),
              )
            }}
          >
            Upload a file
          </InlineFileInput>
          <InlineFileInput
            variant="border"
            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('File uploaded!', {
                    icon: 'checkmark',
                    description: `ID: ${res.id}`,
                  })
                }),
              )
            }}
          >
            Upload multiple files
          </InlineFileInput>
        </div>
      )
    },
  },
]
