import { useRef, useState } from "preact/hooks";
import toast from 'react-hot-toast';
import Button from "../../miniComponents/Button";
import Input from "../../miniComponents/Input";
import { trty } from "../../treaty";

export default function SidebarStaff({ setCurrentPeopleView, currentView, setUser }) {

    const userIdRef = useRef<HTMLInputElement>();
    const [punishments, setPunishments] = useState<undefined | any[]>();

    return (
        <>
            <h1 class="text-center text-3xl text-white">Staff</h1>

            <div class="border-b-4">
                <Input placeholder="user ID" extraClass="m-0" ref={userIdRef}></Input>
                <Button extraClass="m-0 py-2 my-2 w-full" onClick={async () => {
                    const req = await trty.api.staff.punishments.post({
                        userId: userIdRef.current.value
                    })
                    if (req.data) setPunishments(req.data as any);
                }}>See punishments</Button>
                <Button extraClass="m-0 py-2 mb-2 w-full" onClick={() => {
                    const bar = document.getElementById("peopleBar");
                    const barButton = document.getElementById("peopleBarButton");
                    if (bar.style.display !== "flex") {
                        bar.style.display = "flex";
                        barButton.className = barButton.className.replace('right-6', "right-64")
                    }

                    setCurrentPeopleView("person");
                    setUser({ id: userIdRef.current.value });
                }}>User actions</Button>
            </div>

            {punishments === undefined ? "No user searched." : punishments.length == 0 ? "This user has no punishments!" : punishments.map((z, i) => {
                return <div class={(i == 0 ? "" : "border-t-2") + " text-black"}>
                    <Button extraClass="p-2 m-1" onClick={() => {
                        toast.promise((async () => {
                            await trty.api.staff.invalidatePunishment.post({
                                punishmentId: z.id
                            })
                        })(), {
                            loading: "Invalidating punishment..",
                            success: "Invalidated.",
                            error: "Failed to invalidate!"
                        })
                    }}>Remove punishment</Button>
                    <div><i class={"text-white fa-solid fa-" + (z.type == "ban" ? "hammer-crash" : "comment-slash")}></i> {z.type.toUpperCase()}</div>
                    <div>ID: <strong>{z.id}</strong></div>
                    <div>Reason: <strong>{z.reason}</strong></div>
                    <div>Banned by: <strong>{z.staffId}</strong></div>
                    <div>Time: <strong>{z.time}ms</strong></div>
                    <div>Banned at: <strong>{z.at.toString()}</strong></div>

                </div>
            })}


        </>
    )
}