'use client';

import Popover from '@/components/ui/Popover';
import { useUser } from '@/context/user';
import { titleCase } from '@/lib/utils';
import { AlignLeftIcon, X } from 'lucide-react';
import { useRouter, useSelectedLayoutSegment } from 'next/navigation';
import { useEffect, useState } from 'react';
import AvatarComponent from '../Avatar';

export default function Usernav({ isOpen, toggle }: { isOpen: boolean; toggle: () => void }) {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const router = useRouter();
  const segment = useSelectedLayoutSegment();

  const { data: me, isLoading } = useUser();

  useEffect(() => {
    if (isOpen) {
      setIsMenuOpen(false);
    }
  }, [isOpen]);

  return (
    <div className="z-50 flex w-full flex-row items-center justify-between border-b border-solid border-highlight-primary px-8 py-4">
      <div className="flex flex-row items-center space-x-2 sm:space-x-0">
        <div className="flex items-center">
          <button onClick={toggle} className="block sm:hidden">
            {isOpen ? (
              <X size={20} className="text-muted" />
            ) : (
              <AlignLeftIcon size={20} className="text-muted" />
            )}
          </button>
        </div>
        {segment && (
          <div className="flex items-center justify-center text-highlight-secondary">
            {titleCase(segment)}
          </div>
        )}
      </div>
      <div className="flex flex-row items-center space-x-4">
        {!isLoading && me ? (
          <Popover
            open={isMenuOpen}
            onOpenChange={setIsMenuOpen}
            trigger={
              <button className="mx-auto flex items-center gap-2">
                <AvatarComponent name={me.pseudo} src={me.avatar} className="h-9 w-9" />
                <span>{me?.pseudo}</span>
              </button>
            }
          >
            <nav className="flex w-32 flex-col gap-2">
              <button
                className="flex items-center gap-1 p-2 text-destructive hover:bg-destructive/10"
                onClick={() => router.push('/logout')}
              >
                Se déconnecter
              </button>
            </nav>
          </Popover>
        ) : (
          <div className="animate-pulse">
            <div className="flex items-center gap-2">
              <div className="h-9 w-9 rounded-full bg-highlight-primary" />
              <div className="h-4 w-14 rounded-full bg-highlight-primary" />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}