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 handleDropdownChatShow = () => {
    window.dispatchEvent(new Event('resize'));
  };
  // console.log(getAuth())
  return (
<div className="flex items-center gap-4">
  <div className="hidden md:flex flex-col items-end mr-2 text-right">
    <span className="font-semibold text-sm text-white leading-tight">{getAuth()?.user.username}</span>
    <span className="text-xs text-gray-400">{getAuth()?.role_name}</span>
  </div>

  <Menu>
    <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">
        <img
          className="w-9 h-9 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 };