import * as React from "react"
 
import { useTimeTravel } from "@/hooks/use-time-travel"
 
type DebugState = {
  form: { title: string; summary: string }
  step: number
}
 
export function DebugPanel() {
  const [form, setForm] = React.useState({ title: "", summary: "" })
  const [step, setStep] = React.useState(1)
 
  const { snapshot, restore, history } = useTimeTravel<DebugState>(
    "debug-panel",
    {
      resolver: () => ({ form, step }),
      onRestore: (state) => {
        setForm(state.form)
        setStep(state.step)
      },
    }
  )
 
  return (
    <div>
      <button onClick={() => snapshot(undefined, { label: `Step ${step}` })}>
        Snapshot
      </button>
      <button onClick={() => restore()}>
        Restore latest ({history.length})
      </button>
    </div>
  )
}

type TimeTravelSnapshot<TState> = {
  id: string
  version: number
  timestamp: number
  label?: string
  state: TState
}