import React from 'react';
import { MdEdit } from 'react-icons/md';
import { FaUserLarge } from 'react-icons/fa6';
import { BiSolidPhoneCall } from 'react-icons/bi';
import { PiSignOutLight } from 'react-icons/pi';
import user from '../../../../Images/dashboard/user.jpg';
import { clearSession, getSession } from '../../../../Services/Others';
import UserRelieveManager from '../../Template/RealivingUser';
import { GlobalCompBranchData } from '../../../../Features/BrachLogin/BranchLogin';
import { userDataByUserId } from '../../../../Features/UserAccount/userData';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
const subDirectory = import.meta.env.ENV_BASE_URL;

const BSNavBarUserInfo = ({
  isOpen,
  divRef,
  // CompBranchData,
  // BacktoLogin,
  // userProfileData,
  // handleEditProfile,
  Logout,
}) => {
  if (!isOpen) return null;

  const UserType = getSession('UserType') ? getSession('UserType') : null;
  const navigate = useNavigate();

  const CompBranchData = useSelector(GlobalCompBranchData);
  const userProfileData = useSelector(userDataByUserId);
  const handleEditProfile = async () => {
    navigate(`${subDirectory}app-page/redirect-userprofile`);
  };
  const BacktoLogin = () => {
    clearSession('BranchId');
    navigate(`${subDirectory}app-page/branch-login`);
  };
  return (
    <div ref={divRef} className="BSNavBar1-Accmenu">
      <div className="BSNavBar1-Acc-menu">
        {CompBranchData?.length > 1 && (
          <div onClick={BacktoLogin}>
            <p className="BSNavBar1-Acc-menu-list">Back to Signin</p>
          </div>
        )}
        <div className="salesUserProfile" style={{ position: 'relative' }}>
          <div
            style={{
              position: 'absolute',
              top: '5px',
              right: '5px',
              cursor: 'pointer',
              display: 'flex',
              justifyContent: 'flex-end',
              gap: '1rem',
            }}
          >
            {/* {UserType != 'Employee' &&  */}
            <MdEdit size={16} onClick={handleEditProfile} />
            {/* } */}
            <UserRelieveManager />
          </div>
          <img
            src={
              userProfileData?.UserImage && userProfileData.UserImage !== ''
                ? userProfileData.UserImage
                : user
            }
            alt={userProfileData?.UserName || 'User'}
            onError={(e) => {
              e.target.onerror = null;
              e.target.src = user;
            }}
          />
          <div>
            <FaUserLarge size={14} /> {userProfileData?.UserName || 'Name'}
            <p
              style={{
                fontSize: '12px',
                textTransform: 'uppercase',
                color: '#0b53b3',
                fontWeight: '500',
              }}
            >
              ({UserType})
            </p>
          </div>
          <div>
            <BiSolidPhoneCall size={16} />{' '}
            {userProfileData?.MobileNo || 'Number'}
          </div>
          <p className="BSNavBar1-Acc-menu-list" onClick={Logout}>
            Sign Out <PiSignOutLight size={16} strokeWidth={10} />
          </p>
        </div>
      </div>
    </div>
  );
};

export default BSNavBarUserInfo;