import { Suspense } from 'react'
import { createDurably, defineJob } from '@coji/durably'
import { DurablyProvider, useJob } from '@coji/durably-react'
import { SQLocalKysely } from 'sqlocal/kysely'
import { z } from 'zod'

const myJob = defineJob({
  name: 'my-job',
  input: z.object({ id: z.string() }),
  run: async (step, payload) => {
    await step.run('step-1', async () => {
      /* ... */
    })
  },
})

// Initialize Durably
async function initDurably() {
  const sqlocal = new SQLocalKysely('app.sqlite3')
  const durably = createDurably({ dialect: sqlocal.dialect }).register({
    myJob,
  })
  await durably.init() // migrate + start
  return durably
}
const durablyPromise = initDurably()

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <DurablyProvider durably={durablyPromise}>
        <MyComponent />
      </DurablyProvider>
    </Suspense>
  )
}

function MyComponent() {
  const { trigger, isRunning, isCompleted } = useJob(myJob)
  return (
    <button onClick={() => trigger({ id: '123' })} disabled={isRunning}>
      Run
    </button>
  )
}

import { useJob } from '@coji/durably-react/client'

function MyComponent() {
  const { trigger, status, output, isRunning } = useJob<
    { id: string },
    { result: number }
  >({
    api: '/api/durably',
    jobName: 'my-job',
  })

  return (
    <button onClick={() => trigger({ id: '123' })} disabled={isRunning}>
      Run
    </button>
  )
}