import { Match, Resource, Switch } from 'solid-js';
import Histogram from '../../components/histogram/Histogram'
import { Category } from '../../types/category';

export function HistogramView({ categories }: Props) {
  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>
  );
}

type Props = {
  categories: Resource<Category[] | null>;
}