import {Invite, InviteWithUsers} from "@/interfaces/invite";
import {User} from "@/interfaces/user";
import {getUserName} from "@/utils/users";
import axios from "axios";
import {useMemo, useState} from "react";
import {BsArrowRepeat} from "react-icons/bs";
import {toast} from "react-toastify";

interface Props {
	invite: InviteWithUsers;
	reload: () => void;
}

export default function InviteWithUserCard({invite, reload}: Props) {
	const [isLoading, setIsLoading] = useState(false);

	const name = useMemo(() => (!invite.from ? null : getUserName(invite.from)), [invite.from]);

	const decide = (decision: "accept" | "decline") => {
		if (!confirm(`Are you sure you want to ${decision} this invite?`)) return;

		setIsLoading(true);
		axios
			.get(`/api/invites/${decision}/${invite.id}`)
			.then(() => {
				toast.success(`Successfully ${decision === "accept" ? "accepted" : "declined"} the invite!`, {toastId: "success"});
				reload();
			})
			.catch((e) => {
				toast.success(`Something went wrong, please try again later!`, {
					toastId: "error",
				});
				reload();
			})
			.finally(() => setIsLoading(false));
	};

	return (
		<div className="border-mti-gray-anti-flash flex min-w-[200px] flex-col gap-6 rounded-xl border p-4 text-black">
			<span>Invited by {name}</span>
			<div className="flex items-center gap-2">
				<button
					onClick={() => decide("accept")}
					disabled={isLoading}
					className="bg-mti-green-ultralight hover:bg-mti-green-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed">
					{!isLoading && "Accept"}
					{isLoading && (
						<div className="flex items-center justify-center">
							<BsArrowRepeat className="animate-spin text-white" size={25} />
						</div>
					)}
				</button>
				<button
					onClick={() => decide("decline")}
					disabled={isLoading}
					className="bg-mti-red-ultralight hover:bg-mti-red-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed">
					{!isLoading && "Decline"}
					{isLoading && (
						<div className="flex items-center justify-center">
							<BsArrowRepeat className="animate-spin text-white" size={25} />
						</div>
					)}
				</button>
			</div>
		</div>
	);
}