import { For, Show } from "solid-js";
import { InlineAppBar } from "./miwi/src/InlineAppBar";
import { SimpleBody } from "./miwi/src/SimpleBody";
import { SimplePage } from "./miwi/src/SimplePage";
import { Txt } from "./miwi/src/Txt";
import { Game, sayHi } from "./Model";
import { Button } from "./miwi/src/Button";
import { CircularProgressIndicator } from "./miwi/src/CircularProgressIndicator";
import { theme } from "./miwi/src/theme";
import { Box, Card, Field, pushPage, Row, useFormula } from "./miwi/src/miwi";
import { EditGamePage } from "./EditGamePage";

export function MainMenu() {
  return (
    <SimplePage>
      <InlineAppBar name="Main Menu" />
      <SimpleBody>
        <Show
          when={Game.haveLoadedAllDocs}
          fallback={<CircularProgressIndicator color={theme.palette.hint} />}
        >
          <For
            each={Game.allDocs}
            fallback={
              <Txt hint widthGrows alignCenter>
                No Games
              </Txt>
            }
          >
            {(game) => (
              <Row widthGrows onClick={() => pushPage(EditGamePage, { game })}>
                {/* <Field
                  value={useFormula(
                    () => game.name,
                    (v) => (game.name = v),
                  )}
                /> */}
                <Txt widthGrows alignCenterLeft>
                  {game.name}
                </Txt>
                <Button
                  fill={theme.palette.warning}
                  onClick={() => game.archive()}
                >
                  Archive
                </Button>
              </Row>
            )}
          </For>
          <Button
            widthGrows
            onClick={() =>
              Game.create({
                name: `Game ${(Game.allDocs!.length + 1)
                  .toString()
                  .padStart(3, "0")}`,
              })
            }
          >
            Create New Game
          </Button>
          <Button
            widthGrows
            onClick={() => sayHi().then((res) => console.log(res))}
          >
            Log "Hi"
          </Button>
        </Show>
      </SimpleBody>
    </SimplePage>
  );
}