import Link from "next/link";
import { useRouter } from "next/navigation";
import { useMediaQuery } from "usehooks-ts";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu/dropdown-menu";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { Skeleton } from "@/components/ui/skeleton/skeleton";
import TriggerButton from "@/components/ui/trigger-button/trigger-button";
import { useAuth } from "@/features/auth/hooks/use-auth";
import { useEnv } from "@/hooks/useEnv";
import { useProfileInformationQuery } from "@/services/eva-display/profile/profile-information.services";

const HeaderUserMenu = () => {
  const { logout } = useAuth();
  const router = useRouter();
  const isDesktop = useMediaQuery("(min-width: 768px)");
  const profileInformationQuery = useProfileInformationQuery();
  const envs = useEnv();

  if (profileInformationQuery.isLoading && !profileInformationQuery.data) {
    return <Skeleton className="h-[44px] w-[162px]" />;
  }

  function getFullName() {
    let userFullName = !profileInformationQuery.data
      ? "Hesabım"
      : `${profileInformationQuery.data?.result.userDetail.firstName} ${profileInformationQuery.data?.result.userDetail.lastName}`;
    const maxLength = 10;
    if (userFullName.length > maxLength) {
      userFullName = `${userFullName.substring(0, maxLength - 3)}...`;
    }

    return userFullName;
  }

  const userFullName = getFullName();

  return (
    <DropdownMenu>
      <DropdownMenuTrigger className="outline-none">
        <TriggerButton
          leftIcon={<LIcon size={24} name="User" />}
          size="md"
          label={isDesktop ? userFullName : ""}
          rightIcon={<LIcon size={24} name="ChevronDown" />}
          className="max-w-[162px] overflow-hidden text-ellipsis"
        />
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuLabel>Hoşgeldin</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem
            onClick={() => router.push("/profile/personal-information")}
          >
            <LIcon name="User" className="mr-2 size-4" />
            <span>Profilim</span>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <LIcon name="CreditCard" className="mr-2 size-4" />
            <Link href={envs.acpUrl} target="_blank">
              <span>Yönetim Paneline git</span>
            </Link>
          </DropdownMenuItem>
          <DropdownMenuItem onClick={logout}>
            <LIcon name="LogOut" className="mr-2 size-4" />
            <span>Çıkış yap</span>
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

export default HeaderUserMenu;