"use client";

import Tooltip from "@/components/Tooltip";
import { Button } from "@/components/ui/button";
import { useGlobal } from "@/context/global";
import { socket } from "@/socket";
import { faUser } from "@fortawesome/free-regular-svg-icons";
import { faSignOut } from "@fortawesome/free-solid-svg-icons";
import { signOut, useSession } from "next-auth/react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { toast } from "sonner";

type AuthHeaderProps = {};
export default function AuthHeader({}: AuthHeaderProps) {
  const { dict } = useGlobal();

  const { data }: any = useSession();
  const router = useRouter();

  const logOut = async () => {
    socket.emit("user-is-disconnected", { id: data.user.id });

    const promise = () =>
      new Promise(async (resolve) => {
        const result = await signOut({ redirect: false });

        resolve(result);
      });

    toast.promise(promise, {
      duration: 2000,
      loading: dict.alerts.log_out.loading,
      success: () => {
        router.push("/auth/login");

        return (
          <p>
            {dict.alerts.log_out.success}{" "}
            <span className="italic">{dict.alerts.general.redirecting}</span>
          </p>
        );
      },
      error: () => dict.alerts.log_out.error,
    });
  };

  return (
    <header className="flex items-center justify-between bg-white px-4 py-2 shadow">
      <div>
        <p className="flex items-center gap-2">
          <Link className="w-[calc(100px)]" href={"#"}>
            <picture>
              <img src="/assets/logo-color.png" alt="" />
            </picture>
          </Link>
        </p>
      </div>
      <div className="group flex items-center gap-2">
        {data?.user && (
          <Tooltip content={data.user.email}>
            <Button
              variant="soft"
              color="primary"
              size="xs"
              decorator={faUser}
              isIcon
              rounded
            />
          </Tooltip>
        )}
        <Tooltip content={dict.pages.general.sign_out}>
          <Button
            variant="soft"
            color="danger"
            size="xs"
            decorator={faSignOut}
            isIcon
            rounded
            onClick={logOut}
          />
        </Tooltip>
      </div>
    </header>
  );
}