import React, { StrictMode, useState } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';

export function checkedRequest(data) {
  const item = String(data.get('item') || '');
  const quantity = String(data.get('quantity') || '').trim();
  const note = String(data.get('note') || '').trim();
  if (
    !['basket', 'stool'].includes(item) ||
    !/^[1-3]$/.test(quantity) ||
    note.length > 120
  )
    return null;
  return { item, quantity: Number(quantity), note };
}
function App() {
  const [message, setMessage] = useState('No preview');
  function preview(event) {
    event.preventDefault();
    const result = checkedRequest(new FormData(event.currentTarget));
    setMessage(
      result
        ? 'Local preview: ' + result.quantity + ' ' + result.item + '. Not reserved.'
        : 'Check the item, quantity and note.',
    );
  }
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <form onSubmit={preview}>
        <label>
          Item
          <select name="item" required>
            <option value="basket">Basket</option>
            <option value="stool">Stool</option>
          </select>
        </label>
        <label>
          Quantity
          <input
            name="quantity"
            type="number"
            min="1"
            max="3"
            step="1"
            required
            defaultValue="1"
          />
        </label>
        <label>
          Handling note
          <textarea name="note" maxLength={120} rows={3} />
        </label>
        <button>Preview locally</button>
      </form>
      <output aria-live="polite">{message}</output>
    </main>
  );
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);