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 getImage = (sus: Amogus) => (sus.isImposter ? imposter : amogus);

const initialCrewmates: Amogus[] = [
    { key: "a", isImposter: true, posX: 10, posY: 20, speedX: 10, speedY: 30 },
    {
        key: "b",
        isImposter: false,
        posX: 400,
        posY: 200,
        speedX: 10,
        speedY: -20,
    },
    {
        key: "c",
        isImposter: false,
        posX: 900,
        posY: 200,
        speedX: -20,
        speedY: 10,
    },
];

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

const stepCrewmates = (list: Amogus[]) => {
    const { innerWidth: width, innerHeight: height } = window;
    const newCrewmates = list.slice();
    for (const c of newCrewmates) {
        let newX = c.posX + c.speedX;
        let newY = c.posY + c.speedY;
        if (newX > width - 90) {
            newX = width - 90;
            c.speedX *= -1;
        }
        if (newX < 0) {
            newX = 0;
            c.speedX *= -1;
        }
        if (newY > height - 120) {
            newY = height - 120;
            c.speedY *= -1;
        }
        if (newY < 0) {
            newY = 0;
            c.speedY *= -1;
        }
        c.posX = newX;
        c.posY = newY;
    }
    return newCrewmates;
};

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

    useEffect(() => {
        const timer = setInterval(() => {
            const c = crewmates;
            setCrewmates(stepCrewmates(c));
        }, 100);
        return () => {
            clearInterval(timer);
        };
    }, [crewmates]);

    return <>{crewmates.map((c) => makeCrewmate(c))}</>;
}