import { createResource, Match, Resource, Switch } from 'solid-js';
import Histogram from '../histogram/Histogram'
import './App.css'
import { getAllCategories } from '../../ajax/backend';
import { Category } from '../../types/category';

function App() {
  const [categories] = createResource(getAllCategories);

  return (
    <Switch>
      <Match when={categories.state === 'ready'}>
        <Histogram categories={(categories as Extract<Resource<Category[]>, { state: 'ready' }>)()} />
      </Match>
      <Match when={categories.state === 'pending'}>
        <p>Loading...</p>
      </Match>
      <Match when={categories.state === 'unresolved'}>
        <p>Unresolved!</p>
      </Match>
      <Match when={categories.state === 'errored'}>
        <p>Error!</p>
        <p>{JSON.stringify(categories.error, null, 2)}</p>
        <p>{JSON.stringify(categories(), null, 2)}</p>
      </Match>
      <Match when={categories.state === 'refreshing'}>
        <p>Refreshing!</p>
      </Match>
    </Switch>
  );
}

export default App