// Field components
const { useState } = React;

function TextField({ field, value, onChange, error }) {
  const Tag = field.type === 'textarea' ? 'textarea' : 'input';
  const inputType = field.type === 'number' ? 'number'
                   : field.type === 'email' ? 'email'
                   : 'text';
  const cls = field.type === 'textarea' ? 'textarea' : 'input';
  return (
    <Tag
      className={cls + (error ? ' error' : '')}
      type={field.type !== 'textarea' ? inputType : undefined}
      placeholder={field.placeholder || ''}
      value={value || ''}
      onChange={e => onChange(e.target.value)}
      rows={field.type === 'textarea' ? 3 : undefined}
      inputMode={field.type === 'number' ? 'numeric' : undefined}
    />
  );
}

function RadioField({ field, value, onChange }) {
  return (
    <div className="choices" role="radiogroup">
      {field.options.map(opt => {
        const selected = value === opt;
        return (
          <label key={opt} className={'choice' + (selected ? ' selected' : '')}>
            <input
              type="radio"
              name={field.id}
              value={opt}
              checked={selected}
              onChange={() => onChange(opt)}
            />
            <span className="dot" aria-hidden="true"></span>
            <span>{opt}</span>
          </label>
        );
      })}
    </div>
  );
}

function ScaleField({ field, value, onChange }) {
  const val = Number(value);
  return (
    <div>
      <div className="scale">
        {Array.from({ length: 10 }, (_, i) => i + 1).map(n => (
          <button
            key={n}
            type="button"
            className={'scale-btn' + (val === n ? ' selected' : '')}
            onClick={() => onChange(String(n))}
          >
            {n}
          </button>
        ))}
      </div>
      {field.legend && (
        <div className="scale-legend">
          <span>1 · {field.legend[0]}</span>
          <span>{field.legend[1]} · 10</span>
        </div>
      )}
    </div>
  );
}

function Field({ field, value, onChange, error }) {
  let control;
  if (field.type === 'radio') {
    control = <RadioField field={field} value={value} onChange={onChange} />;
  } else if (field.type === 'scale') {
    control = <ScaleField field={field} value={value} onChange={onChange} />;
  } else {
    control = <TextField field={field} value={value} onChange={onChange} error={error} />;
  }

  return (
    <div className="field">
      <label className="q" htmlFor={field.id}>
        <span>{field.q}</span>
        {field.required && <span className="req">●</span>}
      </label>
      {field.help && <div className="help">{field.help}</div>}
      {control}
      {error && <div className="err-msg">{error}</div>}
    </div>
  );
}

// Groups fields with grid: 'half' side-by-side
function FieldList({ fields, values, errors, onChange }) {
  const rows = [];
  let i = 0;
  while (i < fields.length) {
    const f = fields[i];
    const next = fields[i + 1];
    if (f.grid === 'half' && next && next.grid === 'half') {
      rows.push(
        <div className="field-grid-2" key={f.id}>
          <Field field={f} value={values[f.id]} error={errors[f.id]} onChange={v => onChange(f.id, v)} />
          <Field field={next} value={values[next.id]} error={errors[next.id]} onChange={v => onChange(next.id, v)} />
        </div>
      );
      i += 2;
    } else {
      rows.push(
        <Field key={f.id} field={f} value={values[f.id]} error={errors[f.id]} onChange={v => onChange(f.id, v)} />
      );
      i += 1;
    }
  }
  return <>{rows}</>;
}

Object.assign(window, { Field, FieldList });