import { useState, useEffect } from "react";
import PlayerSelect, { IPlayer } from "../components/playerSelect";
import "../css/home.css";
import { startUp } from "../ts/canvas.ts";

export default function Home() {
  const [selectedRadio, setSelectedRadio] = useState<number>(-1);

  const [selectedPlayer, setSelectedPlayer] = useState<IPlayer>();
  const [calculations, setCalculations] = useState<ICalculations>({
    header: 0,
    leftFoot: 0,
    rightFoot: 0,
  });

  const [mousePosition, setMousePosition] = useState<number[]>([0, 0]);

  useEffect(() => {
    startUp(mousePosition, setMousePosition);
  }, []);

  const players: IPlayer[] = [
    {
      id: 1,
      name: "Nicolai Flø",
      shirtNumber: 1,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Nicolai-Floe.png",
      position: "GK",
      goals: 0,
      assist: 1,
      matches: 100,
      shots: [],
    },
    {
      id: 2,
      name: "Jonas Dakir",
      shirtNumber: 28,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Jonas-Dakir.png",
      position: "GK",
      goals: 0,
      assist: 1,
      matches: 1,
      shots: [],
    },
    {
      id: 3,
      name: "Christoffer Remmer",
      shirtNumber: 2,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Christoffer-Remmer.png",
      position: "DEF",
      goals: 0,
      assist: 1,
      matches: 5,
      shots: [],
    },
    {
      id: 4,
      name: "Simon wæver",
      shirtNumber: 3,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Simon-Waever.png",
      position: "DEF",
      goals: 1,
      assist: 1,
      matches: 5,
      shots: [],
    },
    {
      id: 5,
      name: "Daniel Gretarsson",
      shirtNumber: 4,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Daniel-Gretarsson.png",
      position: "DEF",
      goals: 0,
      assist: 1,
      matches: 5,
      shots: [],
    },
    {
      id: 6,
      name: "Marc Dal Hende",
      shirtNumber: 5,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Marc-Dal-Hende.png",
      position: "DEF",
      goals: 5,
      assist: 4,
      matches: 120,
      shots: [],
    },
    {
      id: 7,
      name: "Maxime Soulas",
      shirtNumber: 12,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Maxime-Soulas.png",
      position: "DEF",
      goals: 3,
      assist: 1,
      matches: 40,
      shots: [],
    },
    {
      id: 8,
      name: "Jonas Thorsen",
      shirtNumber: 16,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Jonas-Thorsen.png",
      position: "DEF",
      goals: 0,
      assist: 1,
      matches: 6,
      shots: [],
    },
    {
      id: 9,
      name: "Atli Barkarson",
      shirtNumber: 21,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Atli-Barkarson.png",
      position: "DEF",
      goals: 5,
      assist: 1,
      matches: 35,
      shots: [],
    },
    {
      id: 10,
      name: "Tobias Sommer",
      shirtNumber: 26,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Tobias-Sommer.png",
      position: "DEF",
      goals: 0,
      assist: 1,
      matches: 6,
      shots: [],
    },
    {
      id: 11,
      name: "Rasmus Vinderslev",
      shirtNumber: 6,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Rasmus-Vinderslev.png",
      position: "MID",
      goals: 0,
      assist: 12,
      matches: 136,
      shots: [],
    },
    {
      id: 12,
      name: "Sefer Emini",
      shirtNumber: 7,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Sefer-Emini.png",
      position: "MID",
      goals: 3,
      assist: 6,
      matches: 12,
      shots: [],
    },
    {
      id: 13,
      name: "Troels Kløve",
      shirtNumber: 8,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Troels-Kloeve.png",
      position: "MID",
      goals: 7,
      assist: 18,
      matches: 45,
      shots: [],
    },
    {
      id: 14,
      name: "Marcus Kristensen",
      shirtNumber: 15,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Marcus-Kristensen.png",
      position: "MID",
      goals: 0,
      assist: 1,
      matches: 10,
      shots: [],
    },
    {
      id: 15,
      name: "José Gallegos",
      shirtNumber: 17,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Jose-Gallegos.png",
      position: "MID",
      goals: 4,
      assist: 10,
      matches: 30,
      shots: [],
    },
    {
      id: 16,
      name: "Ivan Nikolov",
      shirtNumber: 18,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Ivan-Nikolov.png",
      position: "MID",
      goals: 2,
      assist: 4,
      matches: 8,
      shots: [],
    },
    {
      id: 17,
      name: "Andreas Oggesen",
      shirtNumber: 22,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Andreas-Oggesen.png",
      position: "MID",
      goals: 5,
      assist: 13,
      matches: 45,
      shots: [],
    },
    {
      id: 18,
      name: "Mads Hansen",
      shirtNumber: 23,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Mads-Hansen.png",
      position: "MID",
      goals: 0,
      assist: 1,
      matches: 6,
      shots: [],
    },
    {
      id: 19,
      name: "Kristoffer Jørgensen",
      shirtNumber: 29,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Kristoffer-Joergensen.png",
      position: "MID",
      goals: 0,
      assist: 0,
      matches: 2,
      shots: [],
    },
    {
      id: 20,
      name: "Lukas Björklund",
      shirtNumber: 30,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Lukas-Bjorklund.png",
      position: "MID",
      goals: 1,
      assist: 3,
      matches: 10,
      shots: [],
    },
    {
      id: 21,
      name: "Mikkel Hyllegaard",
      shirtNumber: 9,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Mikkel-Hyllegaard.png",
      position: "ATK",
      goals: 1,
      assist: 1,
      matches: 5,
      shots: [],
    },
    {
      id: 22,
      name: "Kristall Ingason",
      shirtNumber: 10,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Kristall-Ingason.png",
      position: "ATK",
      goals: 4,
      assist: 6,
      matches: 10,
      shots: [],
    },
    {
      id: 23,
      name: "Emil Berggreen",
      shirtNumber: 11,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Emil-Berggreen.png",
      position: "ATK",
      goals: 5,
      assist: 2,
      matches: 8,
      shots: [],
    },
    {
      id: 24,
      name: "Søren Andreasen",
      shirtNumber: 14,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Soeren-Andreasen.png",
      position: "ATK",
      goals: 4,
      assist: 1,
      matches: 12,
      shots: [],
    },
    {
      id: 25,
      name: "Peter Christiansen",
      shirtNumber: 20,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Peter-Christiansen.png",
      position: "ATK",
      goals: 30,
      assist: 14,
      matches: 50,
      shots: [
        {
          placement: [15, 18],
          usedFoot: "LEFT",
          scored: true,
        },
        {
          placement: [15, 18],
          usedFoot: "LEFT",
          scored: true,
        },
        {
          placement: [15, 18],
          usedFoot: "RIGHT",
          scored: true,
        },
      ],
    },
    {
      id: 26,
      name: "Mads Agger",
      shirtNumber: 25,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Mads-Agger.png",
      position: "ATK",
      goals: 5,
      assist: 4,
      matches: 10,
      shots: [],
    },
    {
      id: 27,
      name: "Sebastian Koch",
      shirtNumber: 27,
      picture:
        "https://soenderjyskefodbold.dk/wp-content/uploads/2023/09/Sebastian-Koch.png",
      position: "ATK",
      goals: 0,
      assist: 0,
      matches: 1,
      shots: [],
    },
  ];

  function openModal() {
    if (selectedPlayer) {
      setSelectedRadio(selectedPlayer.id);
    }
  }

  function returnHighest(a: number, b: number) {
    return a >= b ? a : b;
  }

  // Handles when the suer changes the player and performs basic calculations
  function selectPlayerHandle(
    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) {
    e.preventDefault();
    const newPlayer: IPlayer | undefined = players.find(
      (a) => a.id === selectedRadio
    );
    setSelectedPlayer(newPlayer);
    if (newPlayer)
      setCalculations({
        header: returnHighest(
          parseFloat(
            (
              (newPlayer.shots.filter(
                (shot) => shot.usedFoot === "HEAD" && shot.scored
              ).length /
                newPlayer.shots.filter((shot) => shot.scored).length) *
              100
            ).toFixed(2)
          ),
          0
        ),
        leftFoot: returnHighest(
          parseFloat(
            (
              (newPlayer.shots.filter(
                (shot) => shot.usedFoot === "LEFT" && shot.scored
              ).length /
                newPlayer.shots.filter((shot) => shot.scored).length) *
              100
            ).toFixed(2)
          ),
          0
        ),
        rightFoot: returnHighest(
          parseFloat(
            (
              (newPlayer.shots.filter(
                (shot) => shot.usedFoot === "RIGHT" && shot.scored
              ).length /
                newPlayer.shots.filter((shot) => shot.scored).length) *
              100
            ).toFixed(2)
          ),
          0
        ),
      });
  }

  interface ICalculations {
    header: number;
    leftFoot: number;
    rightFoot: number;
  }

  return (
    <div className="home">
      <div className="playerSelection">
        <div className="row-playerStatistisk">
          <div className="statistiskGrid">
            <div className="row">
              <h5>Navn: </h5>
              <h6>{selectedPlayer && selectedPlayer.name}</h6>
            </div>
            <div className="row">
              <h5>Mål: </h5>
              <h6>{selectedPlayer && selectedPlayer.goals}</h6>
            </div>
            <div className="row">
              <h5>Assist: </h5>
              <h6>{selectedPlayer && selectedPlayer.assist}</h6>
            </div>
            <div className="row">
              <h5>Kampe: </h5>
              <h6>{selectedPlayer && selectedPlayer.matches}</h6>
            </div>
            <div className="row row-goals-foot">
              <div className="col">
                <div className="image">
                  <img src="/football_header.png" alt="football shoe" />
                </div>
                <h6>{calculations.header}%</h6>
              </div>
              <div className="col">
                <div className="image flip-img">
                  <img src="/football_shoe.png" alt="football shoe" />
                </div>
                <h6>{calculations.leftFoot}%</h6>
              </div>
              <div className="col">
                <div className="image">
                  <img src="/football_shoe.png" alt="football shoe" />
                </div>
                <h6>{calculations.rightFoot}%</h6>
              </div>
            </div>
          </div>
        </div>
        <div className="row-player">
          {(selectedPlayer && (
            <div className="selectedPlayer selected">
              <h6 className="shirtNumber">{selectedPlayer.shirtNumber}</h6>
              <div className="playerImg">
                <img src={selectedPlayer.picture} alt={selectedPlayer.name} />
              </div>
            </div>
          )) || (
            <div className="selectedPlayer">
              <div className="playerImg">
                <img src="/player_placeholder.jpg" alt="placeholder player" />
              </div>
            </div>
          )}

          <button
            type="button"
            className="btn btn-primary"
            data-bs-toggle="modal"
            data-bs-target="#spillerModal"
            data-bs-whatever="@getbootstrap"
            onClick={() => openModal()}
          >
            Vælg Spiller
          </button>
          <div
            className="modal fade"
            id="spillerModal"
            tabIndex={-1}
            aria-labelledby="spillerModalLabel"
            aria-hidden="true"
          >
            <div className="modal-dialog">
              <div className="modal-content">
                <div className="modal-header">
                  <h1 className="modal-title fs-5" id="spillerModalLabel">
                    Spiller valg
                  </h1>
                  <button
                    type="button"
                    className="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                  ></button>
                </div>
                <div className="modal-body">
                  <form>
                    <div className="row">
                      <h6>Målmænd</h6>
                      <div className="d-flex gap-3 flex-wrap">
                        {players
                          .filter((player) => player.position === "GK")
                          .map((player) => (
                            <PlayerSelect
                              key={player.id}
                              player={player}
                              onChange={setSelectedRadio}
                              selectedRadio={selectedRadio}
                            />
                          ))}
                      </div>
                    </div>
                    <div className="row">
                      <h6>Forsvar</h6>
                      <div className="d-flex gap-3 flex-wrap">
                        {players
                          .filter((player) => player.position === "DEF")
                          .map((player) => (
                            <PlayerSelect
                              key={player.id}
                              player={player}
                              onChange={setSelectedRadio}
                              selectedRadio={selectedRadio}
                            />
                          ))}
                      </div>
                    </div>
                    <div className="row">
                      <h6>Midtbanne</h6>
                      <div className="d-flex gap-3 flex-wrap">
                        {players
                          .filter((player) => player.position === "MID")
                          .map((player) => (
                            <PlayerSelect
                              key={player.id}
                              player={player}
                              onChange={setSelectedRadio}
                              selectedRadio={selectedRadio}
                            />
                          ))}
                      </div>
                    </div>
                    <div className="row">
                      <h6>Angriber</h6>
                      <div className="d-flex gap-3 flex-wrap">
                        {players
                          .filter((player) => player.position === "ATK")
                          .map((player) => (
                            <PlayerSelect
                              key={player.id}
                              player={player}
                              onChange={setSelectedRadio}
                              selectedRadio={selectedRadio}
                            />
                          ))}
                      </div>
                    </div>
                  </form>
                </div>
                <div className="modal-footer">
                  <button
                    type="button"
                    className="btn btn-secondary"
                    data-bs-dismiss="modal"
                  >
                    Close
                  </button>
                  <button
                    type="button"
                    id="choosePlayerBtn"
                    className="btn btn-primary"
                    data-bs-dismiss="modal"
                    onClick={(e) => selectPlayerHandle(e)}
                  >
                    Vælg
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="shotInsertion">
        <div className="canvas">
          <canvas id="pitch">
            Your browser does not support the canvas element.
          </canvas>
        </div>
        <h6>
          {mousePosition[0]}, {mousePosition[1]}
        </h6>
      </div>
    </div>
  );
}