import { createSignal } from "solid-js";
import "./style.css";

import { MainToggle } from "@/components/MainToggle";
import { BlockedSite } from "@/components/BlockedSite";
import { Todo } from "@/components/Todo";

function App() {
  const menus = ["main", "completed", "blocked sites"];

  const [menu, setMenu] = createSignal("main");

  return (
    <>
      <div>
        <MainToggle />
        <h1>let me focus</h1>
        <ul class="menu">
          <For each={menus}>
            {(menu) => (
              <li>
                <button onClick={() => setMenu(menu)}>[{menu}]</button>
              </li>
            )}
          </For>
        </ul>
        <Suspense>
          <Switch>
            <Match when={menu() === "main"}>
              <Todo showInput hoverShowDeleteButton />
            </Match>
            <Match when={menu() === "completed"}>
              <Todo showOnlyCompleted showClearAllTodo />
            </Match>
            <Match when={menu() === "blocked sites"}>
              <BlockedSite />
            </Match>
          </Switch>
        </Suspense>
        <br />[{browser.runtime.getManifest().version}]
      </div>
    </>
  );
}

export default App;