import React, { lazy, Suspense } 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 { GlobalCompBranchData } from '../../../../Features/BrachLogin/BranchLogin';
import { userDataByUserId } from '../../../../Features/UserAccount/userData';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
const UserRelieveManager = lazy(() => import('../../Template/RealivingUser'));
// Scss
import "../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss"
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 (
    <Suspense fallback={<div>Loading…</div>}>
      <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>
    </Suspense>
  );
};

export default BSNavBarUserInfo;