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

function App() {
  const [desk, setDesk] = useState('north');
  const [result, setResult] = useState({ status: 'loading', items: [] });
  useEffect(() => {
    const controller = new AbortController();
    let active = true;
    setResult({ status: 'loading', items: [] });
    fetch('/stock/' + desk + '.json', { signal: controller.signal })
      .then((response) => {
        if (!response.ok) throw new Error('Unavailable');
        return response.json();
      })
      .then((data) => {
        if (!Array.isArray(data) || !data.every((row) => typeof row.name === 'string'))
          throw new Error('Invalid stock');
        if (active) setResult({ status: 'ready', items: data });
      })
      .catch((error) => {
        if (active && error.name !== 'AbortError')
          setResult({ status: 'error', items: [] });
      });
    return () => {
      active = false;
      controller.abort();
    };
  }, [desk]);
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <label>
        Desk
        <select value={desk} onChange={(event) => setDesk(event.target.value)}>
          <option value="north">North</option>
          <option value="east">East</option>
          <option value="missing">Unavailable fixture</option>
        </select>
      </label>
      <output aria-live="polite">{result.status}</output>
      {result.status === 'error' && (
        <p role="alert">Stock could not be loaded. Choose another desk.</p>
      )}
      <ul>
        {result.items.map((row) => (
          <li key={row.id}>{row.name}</li>
        ))}
      </ul>
    </main>
  );
}

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