import { Language } from "./lib/types";

import ArticleSelector from "./components/ArticleSelector/ArticleSelector";
import Panel from "./components/Panel/Panel";
import TOC from "./components/TOC/TOC";

import useUIStore from "./store/uiStore";

import styles from "./App.module.css";
import CelexSelector from "./components/CelexSelector/CelexSelector";
import { useTOC } from "./hooks/toc";

function App() {
  const numPanels = useUIStore((state) => state.numPanels);
  const addPanel = useUIStore((state) => state.addPanel);
  const { data: toc, isPending, error } = useTOC();

  if (isPending) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div className={styles.App}>
      <div className={styles.controls}>
        <CelexSelector />
        <ArticleSelector toc={toc} />
        <button onClick={addPanel}>Add Panel</button>
      </div>
      <div className={styles.panelContainer}>
        <TOC toc={toc} />
        {Array.from({ length: numPanels }, (_, index) => (
          <Panel
            key={index}
            language={
              Object.values(Language)[index % Object.values(Language).length]
            }
          />
        ))}
      </div>
    </div>
  );
}

export default App;