import { IShot } from "../components/playerSelect";

let mousePosition: number[] = [];
let clickedPosition: number[] = [];

const width = 390;
const height = 600;
const radius = 13.5;
let shot: IShot;

export function setCanvasShot(inShot: IShot){
    shot = inShot;
}

export function startUp(inputShot: IShot, setShot: React.Dispatch<IShot>,){
    shot = inputShot;
    const pitchCanvas: HTMLCanvasElement | null = document.querySelector('#pitch');
    let pitchContext: CanvasRenderingContext2D | null = null;
    if(pitchCanvas !== null){
        pitchContext = pitchCanvas.getContext("2d");
    }
    if(pitchContext === null) return;
    pitchContext.canvas.width = width;
    pitchContext.canvas.height = height;
    if (pitchCanvas != null){
        pitchCanvas.addEventListener("mouseleave", () => 
        {
            if(pitchContext === null) return;
            pitchContext.clearRect(0, 0, width, height);
            drawClicked(pitchContext);
        });
        pitchCanvas.addEventListener("mousemove", (e) => {getMousePos(pitchCanvas, e);});
        pitchCanvas.addEventListener("mousemove", () => {draw(pitchContext);});
        pitchCanvas.addEventListener("click", () => 
        {
            setShot({...shot, placement: [mousePosition[0], mousePosition[1]]});
            clickedPosition = mousePosition;
        });
    }
}

function draw(ctx: CanvasRenderingContext2D | null){
    if(ctx != null){
        ctx.clearRect(0, 0, width, height);
        drawClicked(ctx);
        ctx.beginPath();
        ctx.arc(mousePosition[0], mousePosition[1], radius, 0, 2 * Math.PI);
        ctx.stroke();
    }
}

function drawClicked(ctx: CanvasRenderingContext2D){
    if(shot.placement[0] === 0 && shot.placement[1] === 0 ) return;
    ctx.save();
    ctx.fillStyle = "white";
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(clickedPosition[0], clickedPosition[1], radius * 1.1, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
    ctx.restore();
}

function getMousePos(canvas: HTMLCanvasElement | null, e: MouseEventInit) {
    if(canvas){
        const rect = canvas.getBoundingClientRect(), // abs. size of element
        scaleX = canvas.width / rect.width,    // relationship bitmap vs. element for x
        scaleY = canvas.height / rect.height;  // relationship bitmap vs. element for y
        if(e.clientX && e.clientY){
        const x = (e.clientX - rect.left) * scaleX;
        const y = (e.clientY - rect.top) * scaleY; 
        mousePosition = [Math.ceil(x), Math.ceil(y)];
        }
    }
  }


export function drawHeatmap(data: IShot[]) {
    const heatRadius = radius * 3.75;
    const canvas = document.querySelector("#heatMap") as HTMLCanvasElement;
    const ctx = canvas.getContext("2d");
    canvas.width = 390;
    canvas.height = 600;
    console.log(ctx);
    if(ctx === null) return;
    // Draw a circle at each data point
    const intensity = 1 / (data.filter((shot) => shot.scored).length * 0.3);
    data.forEach((shot) => {
        console.log(shot);
        const [x, y] = shot.placement;
        const gradient = ctx.createRadialGradient(x, y, 0, x, y, heatRadius);
        if(shot.scored){
            gradient.addColorStop(0, 'rgba(255, 0, 0, ' + intensity); // Full intensity
            gradient.addColorStop(0.5, 'rgba(255, 0, 0, ' + intensity); // Full intensity
            gradient.addColorStop(1, 'rgba(255, 0, 0, 0');   // Fully transparent
        } else{
            gradient.addColorStop(0, 'rgba(255, 0, 0, ' + intensity * 0.3); // Full intensity
            gradient.addColorStop(0.5, 'rgba(255, 0, 0, ' + intensity * 0.3); // Full intensity
            gradient.addColorStop(1, 'rgba(255, 0, 0, 0');   // Fully transparent
        }
        ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.arc(x, y, heatRadius, 0, Math.PI * 2);
        ctx.fill();
    });

    const newCanvas: HTMLCanvasElement | null = document.querySelector('#pitch');
    let newContext: CanvasRenderingContext2D | null = null;
    if(newCanvas !== null){
        newContext = newCanvas.getContext("2d");
        if(newContext !== null) newContext.clearRect(0, 0, width, height);
    }
}

export function drawShots(shots: IShot[]){
    const pitchCanvas: HTMLCanvasElement | null = document.querySelector('#pitchShots');
    if(pitchCanvas === null) return;
    const pitchContext: CanvasRenderingContext2D | null = pitchCanvas.getContext("2d");
    if(pitchContext === null) return;
    pitchContext.canvas.width = width;
    pitchContext.canvas.height = height;
    pitchContext.fillStyle = "white";
    pitchContext.lineWidth = 2;
    shots.forEach((shot) => {
        pitchContext.beginPath();
        pitchContext.arc(shot.placement[0], shot.placement[1], 16.5, 0, 2 * Math.PI);
        pitchContext.fill();
        pitchContext.stroke();
    });

    
}