import { useEffect, useState } from "react";
import amogus from "/img/amogus.png";
import imposter from "/img/imposter.png";
import style from "./style.module.css";

type Amogus = {
    key: string;
    isImposter: boolean;
    posX: number;
    posY: number;
    speedX: number;
    speedY: number;
};

const { innerWidth: width, innerHeight: height } = window;

const getImage = (sus: Amogus) => (sus.isImposter ? imposter : amogus);

const makeInitialCrewmates: Amogus[] = () => {
    return [
        makeCrewmate(true),
        makeCrewmate(false),
        makeCrewmate(false),
        makeCrewmate(false),
        makeCrewmate(false),
        makeCrewmate(false),
    ];
};

const randNum: number = (min: number, max: number) =>
    Math.random() * (max - min) + min;

const makeCrewmate: Amogus = (imposter: boolean) => ({
    isImposter: imposter,
    posX: randNum(0, width - 90),
    posY: randNum(0, height - 120),
    speedX: Math.random() > 0.5 ? randNum(5, 15) : randNum(-5, -15),
    speedY: Math.random() > 0.5 ? randNum(5, 15) : randNum(-5, -15),
});

const intersect: Bool = (c1: Crewmate, c2: Crewmate) =>
    Math.abs(c1.posX - c2.posX) < 80 && Math.abs(c1.posY - c2.posY) < 90;

const doMove = (crewmates: Amogus[]) =>
    crewmates.map((c) => ({
        ...c,
        posX: c.posX + c.speedX,
        posY: c.posY + c.speedY,
    }));

const doCollision = (crewmates: Amogus[]) =>
    crewmates.map((c) => {
        if (c.posX > width - 90) {
            return { ...c, posX: width - 90, speedX: c.speedX * -1 };
        } else if (c.posX < 0) {
            return { ...c, posX: 0, speedX: c.speedX * -1 };
        } else if (c.posY > height - 120) {
            return { ...c, posY: height - 120, speedY: c.speedY * -1 };
        } else if (c.posY < 0) {
            return { ...c, posY: 0, speedY: c.speedY * -1 };
        } else return c;
    });

const doKills = (crewmates: Amogus[]) => {
    const imposters = crewmates.filter((c) => c.isImposter);
    const alive = crewmates
        .filter((c) => !c.isImposter)
        .filter((c) => imposters.every((i) => !intersect(i, c)));
    return imposters.concat(alive);
};

const checkReset = (crewmates: Amogus[]) =>
    crewmates.every((c) => c.isImposter) ? makeInitialCrewmates() : crewmates;

const renderCrewmate = (crewmate: Amogus, key: number) => (
    <div
        key={key}
        className={style.container}
        style={{ top: crewmate.posY, left: crewmate.posX }}
    >
        <img src={getImage(crewmate)} alt="Amogus" />
    </div>
);

export default function Amogus() {
    const [crewmates, setCrewmates] = useState(() => makeInitialCrewmates());

    useEffect(() => {
        const timer = setInterval(() => {
            setCrewmates((c) => doMove(c));
            setCrewmates((c) => doCollision(c));
            setCrewmates((c) => doKills(c));
            setCrewmates((c) => checkReset(c));
        }, 50);
        return () => {
            clearInterval(timer);
        };
    }, []);

    return <>{crewmates.map((c, index) => renderCrewmate(c, index))}</>;
}