import React, { useEffect, useState } from "react";
import logo from "./kaistevenson.svg";
import "./App.css";

import { Grid } from "./Grid";
import { getWords } from "./serverHelper";

export type GameState = {
  words: { word: string; selected: boolean }[];
};

const initializeGameState = async (): Promise<GameState> => ({
  words: (await getWords()).map((word) => ({ word, selected: false })),
});

const Game = () => {
  //state
  const [gameState, setGameState] = useState<GameState | undefined>(undefined);

  //initialize
  useEffect(() => {
    if (!gameState) {
      initializeGameState()
        .then((state) => setGameState(state))
        .catch(console.error);
    }
  });

  //handlers
  const selectWordHandler = (idx: number) => {
    const candidateState = { ...gameState! };
    if (candidateState.words.filter((word) => word.selected).length === 4) {
      if (!candidateState.words[idx].selected) {
        //if we've already selected 4 words and we would select another,
        //do nothing
        return;
      }
    }
    //FIXME don't mutate state
    candidateState.words[idx].selected = !candidateState.words[idx].selected;
    setGameState(candidateState);
    console.log(`selected ${idx}`);
  };

  //display logic
  return gameState ? (
    <Grid selectWordHandler={selectWordHandler} words={gameState.words!} />
  ) : (
    <h1>Loading...</h1>
  );
};

export const App = () => (
  <div className="App">
    <div className="App-bg">
      <div className="Logo-container">
        <img src={logo} className="App-logo" alt="logo" />
      </div>
      <div className="App-main">
        <Game />
      </div>
    </div>
  </div>
);