import React, { useMemo } from 'react';
import { Avatar, Dropdown } from '@/components/ui';
import withHeaderItem from '@/utils/hoc/withHeaderItem';
import useAuth from '@/utils/hooks/useAuth';
// import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom';
import classNames from 'classnames';
import { HiOutlineLogout, HiOutlineCog } from 'react-icons/hi';
import { t } from 'i18next';
import { useSelector } from 'react-redux';
import useTwColorByName from '@/utils/hooks/useTwColorByName';
import acronym from '@/utils/acronym';
import useOnlineStatus from '@/utils/hooks/useOnlineStatus';

export const UserDropdown = ({ className }) => {
  const dropdownItemList = [
    {
      label: t('Account Setting'),
      path: '/account/settings/profile',
      icon: <HiOutlineCog />,
    },
  ];

  // bind this
  // const userInfo = useSelector((state) => state.auth.user)
  const { authority, email, fullName, avatar } = useSelector((state) => state.auth.user);
  const { signOut } = useAuth();
  const color = useTwColorByName();
  const avatarProps = avatar ? { src: avatar } : { className: `${color(fullName || '')}` };
  const defaultAvatarProps = useMemo(() => ({ size: 35, shape: 'circle' }), []);
  const online = useOnlineStatus();
  const locale = useSelector((state) => state.locale.currentLang);

  const UserAvatar = (
    <div className={classNames(className, 'flex items-center gap-2')}>
      <Avatar {...avatarProps} {...defaultAvatarProps}>
        {acronym(fullName?.toUpperCase() || '')}
        <div className={`absolute bottom-0 ${locale === 'ar' ? 'right-4' : 'left-4'}`}>
          <div
            title={online ? t('ONLINE') : t('OFFLINE')}
            className={`w-3.5 h-3.5 rounded-full border-2 border-white ${online ? 'bg-green-500' : 'bg-gray-400'}`}
          />
        </div>
      </Avatar>

      <div className="hidden lg:block">
        <div className="text-nafithBlueColor-500 dark:text-gray-100 text-md capitalize">{fullName}</div>
        <div className="text-sm text-nafithBlueColor-400 dark:text-gray-100">{t(authority[0])}</div>
      </div>
    </div>
  );

  return (
    <div>
      <Dropdown menuStyle={{ minWidth: 240 }} renderTitle={UserAvatar} placement="bottom-end">
        <Dropdown.Item variant="header">
          <div className="py-2 px-3 flex items-center gap-2">
            <Avatar {...avatarProps} {...defaultAvatarProps}>
              {acronym(fullName?.toUpperCase() || '')}
            </Avatar>
            <div>
              <div className=" text-nafithBlueColor-500 dark:text-gray-100">{fullName}</div>
              <div className=" text-nafithBlueColor-400 dark:text-gray-100">{t(authority[0])}</div>
              <div className="text-xs">{email}</div>
            </div>
          </div>
        </Dropdown.Item>
        <Dropdown.Item variant="divider" />
        {dropdownItemList.map((item) => (
          <Link key={item.label} className="flex gap-2 items-center" to={item.path}>
            <Dropdown.Item eventKey={item.label} key={item.label} className="mb-1">
              <span className="text-xl opacity-50">{item.icon}</span>
              <span>{item.label}</span>
            </Dropdown.Item>
          </Link>
        ))}

        <Dropdown.Item variant="divider" />
        <Dropdown.Item onClick={signOut} eventKey="Sign Out" className="gap-2">
          <span className="text-xl opacity-50">
            <HiOutlineLogout />
          </span>
          <span>{t('Sign Out')}</span>
        </Dropdown.Item>
      </Dropdown>
    </div>
  );
};

export default withHeaderItem(UserDropdown);
