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 = {
    isImposter: boolean;
    posX: number;
    posY: number;
    speedX: number;
    speedY: number;
};

const amogusWidth = 70;
const amogusHeight = 70;

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),
        makeCrewmate(false),
        makeCrewmate(false),
        makeCrewmate(false),
    ];
};

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

const makeCrewmate = (imposter: boolean): Amogus => ({
    isImposter: imposter,
    posX: randNum(0, width - amogusWidth),
    posY: randNum(0, height - amogusHeight),
    speedX: Math.random() > 0.5 ? randNum(4, 10) : randNum(-4, -10),
    speedY: Math.random() > 0.5 ? randNum(4, 10) : randNum(-4, -10),
});

const intersect = (c1: Amogus, c2: Amogus): boolean =>
    Math.abs(c1.posX - c2.posX) < amogusWidth - 20 &&
    Math.abs(c1.posY - c2.posY) < amogusHeight - 20;

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

const doCollisionWalls = (crewmates: Amogus[]) =>
    crewmates.map((c) => {
        if (c.posX > width - amogusWidth) {
            return {
                ...c,
                posX: width - amogusWidth,
                speedX: c.speedX * -1,
            };
        } else if (c.posX < -20) {
            return { ...c, posX: -20, speedX: c.speedX * -1 };
        } else if (c.posY > height - amogusHeight) {
            return {
                ...c,
                posY: height - amogusHeight,
                speedY: c.speedY * -1,
            };
        } else if (c.posY < -20) {
            return { ...c, posY: -20, speedY: c.speedY * -1 };
        } else return c;
    });

// TODO: This is ugly
const doCollisionOthers = (crewmates: Amogus[]) =>
    crewmates.map((c) => {
        const intersections = crewmates
            .filter((o) => o !== c) // don't collide with yourself pls
            .filter((o) => intersect(c, o));

        if (intersections.some((o) => Math.abs(o.posX - c.posX) < 50)) {
            return { ...c, speedX: c.speedX * -1 };
        }
        if (intersections.some((o) => Math.abs(o.posY - c.posY) < 50)) {
            return { ...c, speedY: c.speedY * -1 };
        }
        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) => doCollisionWalls(c));
            setCrewmates((c) => doCollisionOthers(c));
            setCrewmates((c) => doKills(c));
            setCrewmates((c) => checkReset(c));
        }, 50);
        return () => {
            clearInterval(timer);
        };
    }, []);

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