Sheet

'use client'

import { useEffect, useRef, useState } from 'react'
import { Sheet } from '@/components/sheet/Sheet'
import { pipelineAgent, pipelineStore, run } from './agent'
import { button } from '@/lib/ui'

export default function SheetExample() {
  const [store, setStore] = useState(pipelineStore)
  const [round, setRound] = useState(0)
  const [working, setWorking] = useState(false)
  const box = useRef<HTMLDivElement>(null)

  const runAgent = (target = store) =>
    inTurn(async () => {
      setWorking(true)
      await run(target, pipelineAgent, { pause: 650 })
      setWorking(false)
    })

  // the agent starts once the example is on screen
  useEffect(() => {
    const io = new IntersectionObserver(([e]) => {
      if (!e.isIntersecting) return
      io.disconnect()
      void runAgent()
    })
    if (box.current) io.observe(box.current)
    return () => io.disconnect()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const startOver = () => {
    const next = pipelineStore()
    setStore(next)
    setRound((n) => n + 1)
    void runAgent(next)
  }

  return (
    <div ref={box} className="flex h-full flex-col">
      <div className="flex h-14 shrink-0 items-center gap-3 px-4">
        <span className="min-w-0 flex-1 truncate text-[17px] font-semibold">Hiring pipeline</span>
        <Button variant="outline" disabled={working} onClick={startOver}>
          {working ? 'Agent is working' : 'Start over'}
        </Button>
      </div>
      <div className="min-h-0 flex-1">
        <Sheet key={round} store={store} />
      </div>
    </div>
  )
}