var-monorepo/apps/dispatch/app/_components/left/Report.tsx

"use client";
import { ExclamationTriangleIcon, PaperPlaneIcon } from "@radix-ui/react-icons";
import { useSession } from "next-auth/react";
import { useEffect, useState } from "react";
import { cn } from "helpers/cn";
import { serverApi } from "helpers/axios";
import { useLeftMenuStore } from "_store/leftMenuStore";
import { asPublicUser } from "@repo/db";
import { useQuery } from "@tanstack/react-query";
import { getConnectedUserAPI } from "querys/connected-user";

export const Report = () => {
	const { setChatOpen, setReportTabOpen, reportTabOpen, setOwnId } =
		useLeftMenuStore();
	const [sending, setSending] = useState(false);
	const session = useSession();
	const [selectedPlayer, setSelectedPlayer] = useState<string>("default");
	const [message, setMessage] = useState<string>("");

	useEffect(() => {
		if (!session.data?.user.id) return;
		setOwnId(session.data.user.id);
	}, [session, setOwnId]);

	const { data: connectedUser } = useQuery({
		queryKey: ["connected-users"],
		queryFn: async () => {
			const user = await getConnectedUserAPI();
			return user.filter((u) => u.userId !== session.data?.user.id);
		},
		refetchInterval: 10000,
		refetchOnWindowFocus: true,
	});

	return (
		<div
			className={cn(
				"dropdown dropdown-right",
				reportTabOpen && "dropdown-open",
			)}
		>
			<div className="indicator">
				<button
					className="btn btn-soft btn-sm btn-error"
					onClick={() => {
						setChatOpen(false);
						setReportTabOpen(!reportTabOpen);
					}}
				>
					<ExclamationTriangleIcon className="w-4 h-4" />
				</button>
			</div>
			{reportTabOpen && (
				<div
					tabIndex={0}
					className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100] ml-2 border-1 border-error"
				>
					<div className="card-body">
						<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
							<ExclamationTriangleIcon /> Report senden
						</h2>
						<div className="join">
							<select
								className="select select-sm w-full"
								value={selectedPlayer}
								onChange={(e) => setSelectedPlayer(e.target.value)}
							>
								{!connectedUser?.length && (
									<option disabled value="default">
										Kein Nutzer verbunden
									</option>
								)}
								{connectedUser?.length && (
									<option disabled value="default">
										Kein Nutzer auswählen
									</option>
								)}
								{[
									...(connectedUser?.filter(
										(user, idx, arr) =>
											arr.findIndex((u) => u.userId === user.userId) === idx,
									) || []),
								].map((user) => (
									<option key={user.userId} value={user.userId}>
										{asPublicUser(user.publicUser).fullName}
									</option>
								))}
							</select>
						</div>
						<div className="join mt-4">
							<div className="w-full">
								<label className="input join-item w-full">
									<input
										type="text"
										required
										className="w-full"
										placeholder="Nachricht eingeben"
										onChange={(e) => setMessage(e.target.value)}
										value={message}
									/>
								</label>
							</div>
							<button
								className="btn btn-soft join-item"
								onClick={(e) => {
									e.preventDefault();
									if (message.length < 1 || !selectedPlayer) return;
									setSending(true);
									serverApi("/report", {
										method: "POST",
										data: {
											message,
											to: selectedPlayer,
										},
									})
										.then(() => {
											setMessage("");
											setSending(false);
										})
										.catch(() => {
											setSending(false);
										});
								}}
								disabled={sending}
							>
								{sending ? (
									<span className="loading loading-spinner loading-sm"></span>
								) : (
									<PaperPlaneIcon />
								)}
							</button>
						</div>
					</div>
				</div>
			)}
		</div>
	);
};