import { useWaste } from '../store'

interface Props {
  status: 'disconnected' | 'connecting' | 'connected'
}

export function Onboarding({ status }: Props) {
  const { send } = useWaste()

  const label = status === 'connecting'
    ? 'Connecting to daemon…'
    : 'Waiting for daemon — is waste-daemon running?'

  function joinNetwork(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const form = e.currentTarget
    const name = (form.elements.namedItem('network') as HTMLInputElement).value.trim()
    if (!name) return
    send({ type: 'join_network', network_name: name })
  }

  return (
    <div className="onboarding">
      <h1>waste</h1>
      <p className="status">{label}</p>

      {status === 'connected' && (
        <form onSubmit={joinNetwork} className="join-form">
          <input name="network" placeholder="network name" autoComplete="off" autoFocus />
          <button type="submit">Join</button>
        </form>
      )}
    </div>
  )
}