import React, { useState, useEffect, useContext, useRef, useMemo, useCallback } from "react";
import Paper from "@mui/material/Paper";
import equal from "fast-deep-equal";

import { PlayerColor } from "./PlayerColor";

import "./SelectPlayer.css";

import { GlobalContext } from "./GlobalContext";

/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-non-null-assertion */

const SelectPlayer: React.FC = () => {
  const { lastJsonMessage, sendJsonMessage } = useContext(GlobalContext);
  const [turn, setTurn] = useState<any>(undefined);
  const [color, setColor] = useState<string | undefined>(undefined);
  const fields = useMemo(() => ["turn", "color"], []);

  useEffect(() => {
    if (!lastJsonMessage) {
      return;
    }
    const data = lastJsonMessage;
    switch (data.type) {
      case "game-update":
        console.log(`select-players - game-update: `, data.update);
        if ("turn" in data.update && !equal(turn, data.update.turn)) {
          setTurn(data.update.turn);
        }
        if ("color" in data.update && data.update.color !== color) {
          setColor(data.update.color);
        }
        break;
      default:
        break;
    }
  }, [lastJsonMessage, turn, color]);
  useEffect(() => {
    if (!sendJsonMessage) {
      return;
    }
    sendJsonMessage({
      type: "get",
      fields,
    });
  }, [sendJsonMessage, fields]);

  const playerClick = useCallback(
    (event: React.MouseEvent<HTMLDivElement>) => {
      sendJsonMessage({
        type: "steal-resource",
        color: event.currentTarget.getAttribute("data-color"),
      });
    },
    [sendJsonMessage]
  );

  if (!color || !turn || turn.color !== color || !turn.limits || !turn.limits.players) {
    return <></>;
  }

  const list = turn.limits.players.map((item: any) => (
    <div className="SelectPlayerItem" onClick={playerClick} data-color={item.color} key={`player-${item.color}`}>
      <PlayerColor color={item.color} />
      <div>{item.name}</div>
    </div>
  ));

  return (
    <div className="SelectPlayer">
      <Paper>
        <div className="Title">Select Player to Steal From</div>
        <div className="SelectPlayerList">{list}</div>
      </Paper>
    </div>
  );
};

export { SelectPlayer };