import { useRef, useEffect, useState } from 'react';
import { KeenIcon } from '@/components/keenicons';
import { toAbsoluteUrl } from '@/utils';
import { Menu, MenuItem, MenuToggle } from '@/components';
import { DropdownUser } from '@/partials/dropdowns/user';
import { useLanguage } from '@/i18n';
import { getAuth } from '@/auth';

const HeaderTopbar = () => {
  const itemChatRef = useRef<any>(null);
  const itemUserRef = useRef<any>(null);
  const itemNotificationsRef = useRef<any>(null);

  const { isRTL } = useLanguage();

  const [isSticky, setIsSticky] = useState(false);
  useEffect(() => {
    const handleScroll = () => {
      setIsSticky(window.scrollY > 100);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const handleDropdownChatShow = () => {
    window.dispatchEvent(new Event('resize'));
  };

  return (
    <div className="flex items-center gap-4">
      <div className="hidden md:flex flex-col items-end mr-2 text-right mt-1">
        <span
          className={`font-semibold text-lg leading-tight ${isSticky ? 'text-black' : 'text-white'}`}
        >
          {getAuth()?.user.name}
        </span>
        <span className={`text-xs ${isSticky ? 'text-gray-700' : 'text-white'}`}>
          as {getAuth()?.role_name}
        </span>
      </div>

      <Menu className="w-12 h-12">
        <MenuItem
          ref={itemUserRef}
          toggle="dropdown"
          trigger="click"
          dropdownProps={{
            placement: isRTL() ? 'bottom-start' : 'bottom-end',
            modifiers: [
              {
                name: 'offset',
                options: {
                  offset: [20, 10]
                }
              }
            ]
          }}
        >
          <MenuToggle className="btn btn-icon rounded-full w-12 h-12">
            <img
              className="w-12 h-12 rounded-full border border-gray-500 object-cover"
              src={toAbsoluteUrl('/media/avatars/profile.png')}
              alt="User avatar"
            />
          </MenuToggle>
          {DropdownUser({ menuItemRef: itemUserRef })}
        </MenuItem>
      </Menu>
    </div>
  );
};

export { HeaderTopbar };
