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

export function EditGamePage(props: { game: Game }) {
  return (
    <SimplePage>
      <InlineAppBar name={props.game.name} />
      <SimpleBody>
        <Show
          when={Player.haveLoadedAllDocs}
          fallback={<CircularProgressIndicator color={theme.palette.hint} />}
        >
          <For
            each={props.game.players}
            fallback={
              <Txt hint widthGrows alignCenter>
                No Players
              </Txt>
            }
          >
            {(player) => (
              <Row widthGrows>
                <Txt widthGrows alignCenterLeft>
                  {`${player.name} (${player.game?.name})`}
                </Txt>
                <Button
                  onClick={() => pushPage(SwapPlayerGameDialog, { player })}
                >
                  Swap Game
                </Button>
                <Button
                  fill={theme.palette.warning}
                  onClick={() => player.archive()}
                >
                  Archive
                </Button>
              </Row>
            )}
          </For>
          <Button
            widthGrows
            onClick={() =>
              Player.create({
                name: `Player ${(Player.allDocs!.length + 1)
                  .toString()
                  .padStart(3, "0")}`,
                game: props.game,
              })
            }
          >
            Create New Player
          </Button>
        </Show>
      </SimpleBody>
    </SimplePage>
  );
}