// Shared form controls for block editors, styled with the existing admin design
// system (.field-label / .input / .select). Every block's editor is a
// ({ props, onChange }) component; these keep the seven of them consistent and
// short. onChange always receives the full next props object.

export function Field({ label, hint, children }) {
  return (
    <label style={{ display: 'block' }}>
      <span className="field-label">{label}</span>
      {children}
      {hint && (
        <span className="sans dim" style={{ display: 'block', fontSize: '0.78rem', marginTop: 4 }}>
          {hint}
        </span>
      )}
    </label>
  )
}

export function TextField({ label, hint, value, onChange, placeholder, maxLength }) {
  return (
    <Field label={label} hint={hint}>
      <input
        type="text"
        className="input"
        value={value ?? ''}
        placeholder={placeholder}
        maxLength={maxLength}
        onChange={(e) => onChange(e.target.value)}
      />
    </Field>
  )
}

export function TextAreaField({ label, hint, value, onChange, placeholder, rows = 4, maxLength }) {
  return (
    <Field label={label} hint={hint}>
      <textarea
        className="input"
        rows={rows}
        value={value ?? ''}
        placeholder={placeholder}
        maxLength={maxLength}
        onChange={(e) => onChange(e.target.value)}
        style={{ resize: 'vertical', fontFamily: 'inherit' }}
      />
    </Field>
  )
}

// options: array of [value, label] tuples.
export function SelectField({ label, hint, value, onChange, options }) {
  return (
    <Field label={label} hint={hint}>
      <select className="select" value={value ?? ''} onChange={(e) => onChange(e.target.value)}>
        {options.map(([v, l]) => (
          <option key={v} value={v}>
            {l}
          </option>
        ))}
      </select>
    </Field>
  )
}