'use client';
import { Link } from '@/shared/config/i18n/navigation';
import { Button } from '@/shared/ui/button';
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuTrigger,
} from '@/shared/ui/navigation-menu';
import SubMenuLink from './SubMenuLink';
import { ChangeLang } from './ChangeLang';
import { useLoginModal, useRegisterModal } from '@/shared/zustand/auth';
import { useTranslations } from 'next-intl';
import { useUserPlagiatStore } from '@/shared/zustand/user';

function AuthButtons() {
  const t = useTranslations('Navbar');

  const auth = {
    login: { title: t('login'), url: '#' },
    signup: { title: t('signup'), url: '#' },
  };

  const userItem = [{ title: t('logout'), url: '#' }];

  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
  const toggleRegisterModal = useRegisterModal(
    (state) => state.toggleRegisterModal,
  );
  const user = useUserPlagiatStore((state) => state.user);
  console.log('Current user:', user);

  if (user) {
    return (
      <div className="flex flex-row max-sm:items-center max-sm:justify-around  gap-3">
        <div className="sm:flex hidden">
          <ChangeLang />
        </div>
        <NavigationMenu>
          <NavigationMenuItem>
            <NavigationMenuTrigger className="text-xl">
              {user.name} {user.surname}
            </NavigationMenuTrigger>
            <NavigationMenuContent className="bg-popover text-popover-foreground">
              {userItem.map((subItem) => (
                <NavigationMenuLink
                  asChild
                  key={subItem.title}
                  className="w-80"
                >
                  <SubMenuLink item={subItem} />
                </NavigationMenuLink>
              ))}
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenu>
      </div>
    );
  }

  return (
    <div className="flex flex-row max-sm:items-center max-sm:justify-around  gap-3">
      <div className="sm:flex hidden">
        <ChangeLang />
      </div>
      <Button variant="outline" onClick={() => toggleLoginModal()}>
        <Link href={auth.login.url}>{auth.login.title}</Link>
      </Button>
      <Button onClick={() => toggleRegisterModal()}>
        <Link href={auth.signup.url}>{auth.signup.title}</Link>
      </Button>
    </div>
  );
}

export { AuthButtons };