import React from "react";
import { GameState } from "./App";
import Typewriter from "typewriter-effect";

const Tile = ({
  word,
  selectWordHandler,
}: {
  selectWordHandler: () => void;
  word: GameState["words"][number];
}) => (
  <button
    onClick={!word.used ? selectWordHandler : undefined}
    className={`Grid-square ${
      word.selected ? "Selected" : word.used ? "Removed" : ""
    }`}
  >
    <pre>
      <h1 className="Fit-text">{word.word.toUpperCase()}</h1>
    </pre>
  </button>
);

export const Grid = ({
  selectWordHandler,
  submitSelectionHandler,
  flipGroupHandler,
  gameState,
}: {
  selectWordHandler: (idx: number) => void;
  flipGroupHandler: (idx: number) => void;
  submitSelectionHandler: () => void;
  gameState: GameState;
}) => {
  const groups = gameState.groups.map(
    ({ words, title, reason, flipped }, idx) => (
      <button onClick={() => flipGroupHandler(idx)} className="Completed-group">
        {
          <pre>
            {flipped ? (
              <Typewriter
                key={"reason-tw"}
                options={{
                  delay: 1,
                  wrapperClassName: "Group-reason",
                  cursor: "",
                }}
                onInit={(tw) => tw.typeString(reason).start()}
                component={"p"}
              ></Typewriter>
            ) : (
              <div>
                {title !== "LOADING" ? (
                  <Typewriter
                    key={"header-tw"}
                    options={{
                      delay: 30,
                      wrapperClassName: "Group-header",
                      cursor: "",
                    }}
                    onInit={(tw) => tw.typeString(title).start()}
                    component={"h1"}
                  ></Typewriter>
                ) : (
                  <Typewriter
                    key={"loading-tw"}
                    options={{
                      delay: 150,
                      wrapperClassName: "Group-header",
                      cursor: "",
                    }}
                    onInit={(tw) => tw.typeString("Loading...").start()}
                    component={"h1"}
                  ></Typewriter>
                )}
                <Typewriter
                  options={{
                    delay: 15,
                    wrapperClassName: "Group-content",
                    cursor: "",
                  }}
                  onInit={(tw) => tw.typeString(words.join(", ")).start()}
                  component={"h2"}
                ></Typewriter>
              </div>
            )}
          </pre>
        }
      </button>
    )
  );
  const tiles = gameState.words.map((word, i) =>
    !word.used ? (
      <Tile
        selectWordHandler={() => selectWordHandler(i)}
        word={word}
        key={i}
      />
    ) : undefined
  );
  return (
    <div className="Grid-container">
      {groups}
      <div className="Grid">{tiles}</div>
      {gameState.words.filter(({ selected }) => selected).length === 4 ? (
        <button className="Submit-button" onClick={submitSelectionHandler}>
          SUBMIT
        </button>
      ) : undefined}
    </div>
  );
};