// The controls for one lab, declared by the lab and laid out in a single row
// above its figures.
import type { Params, ParamValue } from '../engine/types.ts'
import type { Control } from './types.ts'

export default function Controls({
  controls,
  params,
  onChange,
}: {
  controls: Control[]
  params: Params
  onChange: (key: string, value: ParamValue) => void
}) {
  if (controls.length === 0) return null
  return (
    <div className="controls">
      {controls.map((c) => {
        if (c.kind === 'select') {
          return (
            <label className="control" key={c.key}>
              <span className="control-label">{c.label}</span>
              <select
                value={String(params[c.key])}
                onChange={(e) => {
                  const raw = e.target.value
                  const opt = c.options.find((o) => String(o.value) === raw)
                  onChange(c.key, opt ? opt.value : raw)
                }}
              >
                {c.options.map((o) => (
                  <option key={String(o.value)} value={String(o.value)}>
                    {o.label}
                  </option>
                ))}
              </select>
            </label>
          )
        }
        if (c.kind === 'toggle') {
          return (
            <label className="control control-toggle" key={c.key}>
              <input
                type="checkbox"
                checked={Boolean(params[c.key])}
                onChange={(e) => onChange(c.key, e.target.checked)}
              />
              <span className="control-label">{c.label}</span>
            </label>
          )
        }
        const value = Number(params[c.key])
        const fmt = c.format ?? ((v: number) => String(v))
        if (c.values) {
          const idx = Math.max(
            0,
            c.values.findIndex((v) => v === value),
          )
          return (
            <label className="control" key={c.key}>
              <span className="control-label">
                {c.label} <span className="control-value">{fmt(value)}</span>
              </span>
              <input
                type="range"
                min={0}
                max={c.values.length - 1}
                step={1}
                value={idx}
                onChange={(e) => onChange(c.key, c.values![Number(e.target.value)])}
              />
            </label>
          )
        }
        return (
          <label className="control" key={c.key}>
            <span className="control-label">
              {c.label} <span className="control-value">{fmt(value)}</span>
            </span>
            <input
              type="range"
              min={c.min}
              max={c.max}
              step={c.step ?? 1}
              value={value}
              onChange={(e) => onChange(c.key, Number(e.target.value))}
            />
          </label>
        )
      })}
    </div>
  )
}