import { useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from 'primereact/button';
import { Avatar } from 'primereact/avatar';
import { Menu } from 'primereact/menu';
import { useCurrentUser } from '@/core/hooks/useCurrentUser';
import './AppTopbar.scss';

interface Props {
  onToggleSidebar: () => void;
}

export default function AppTopbar({ onToggleSidebar }: Props) {
  const { currentUser } = useCurrentUser();
  const navigate = useNavigate();
  const userMenu = useRef<Menu>(null);

  const userMenuItems = [
    { label: '내 정보', icon: 'pi pi-user', command: () => navigate('/profile') },
    { label: '비밀번호 변경', icon: 'pi pi-key', command: () => navigate('/change-password') },
    { separator: true },
    { label: '로그아웃', icon: 'pi pi-sign-out', command: () => navigate('/login') },
  ];

  return (
    <header className="app-topbar">
      <div className="app-topbar__left">
        <Button icon="pi pi-bars" text rounded severity="secondary" onClick={onToggleSidebar} />
      </div>

      <div className="app-topbar__right">
        <Button icon="pi pi-bell" text rounded severity="secondary" className="app-topbar__notify-btn" />

        <Button
          text
          rounded
          onClick={(e) => userMenu.current?.toggle(e)}
          className="app-topbar__user-btn"
        >
          <Avatar label={currentUser?.fullName?.charAt(0) ?? '?'} shape="circle" size="normal" />
          <span className="app-topbar__username">{currentUser?.fullName}</span>
        </Button>
        <Menu model={userMenuItems} popup ref={userMenu} />
      </div>
    </header>
  );
}
