/*
* https://frontendeval.com/questions/memory-game
*
* Create a card-matching memory game
*/

const NUM_LIST = () => {
  let list = [];
  for (let i = 1; i <= 18; i++) {
    list.push(i);
    list.push(i);
  }
  return list;
};

const App = () => {
  const [start, setStart] = React.useState("init");
  const [nums, setNums] = React.useState(NUM_LIST);
  const [solved, setSolved] = React.useState([]);
  const [opened, setOpened] = React.useState(null);

  const handleStart = () => {
    setStart("start");
    setNums(radomNums());
    setSolved([]);
  };

  const radomNums = () => {
    return nums.sort(() => Math.random() - 0.5);
  };

  const getClassName = (num, index) => {
    if (solved.includes(num)) return "removed";
    if (opened && opened[index] === num) return "show";
    return "hidden";
  };

  const openCard = (num, index) => {
    if (opened && Object.keys(opened).length === 2) return;

    if (opened === null) {
      setOpened({ [index]: num });
    } else if (Object.values(opened)[0] === num) {
      setOpened((pre) => ({ ...pre, [index]: num }));
      setTimeout(() => {
        setSolved((pre) => [...pre, num]);
        setOpened(null);
      }, 1000);
    } else {
      setOpened((pre) => ({ ...pre, [index]: num }));
      setTimeout(() => {
        setOpened(null);
      }, 1000);
    }
  };

  React.useEffect(() => {
    setNums(radomNums());
  }, []);

  React.useEffect(() => {
    if (solved.length === 18) {
      setStart("win");
    }
  }, [solved]);

  return (
    <div className="App">
      <h1>Memory game</h1>
      <div className="game">
        {start === "start" && (
          <div className="cards">
            {nums.map((num, index) => (
              <div
                key={index}
                className={`card ${getClassName(num, index)}`}
                onClick={() => openCard(num, index)}
              >
                {num}
              </div>
            ))}
          </div>
        )}
        <div>
          {start === "win" && (
            <div className="win">Congrats, you win the game!!!!</div>
          )}
          {start !== "start" && (
            <button onClick={handleStart}>
              {start === "win" ? "Play again" : "Play"}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));