import React from 'react';
import basicstore from '@/stores/auth';

const Navbar = () => {
  const { setUserData, darkmode } = basicstore();
  const switchThemes = (): void => {
    const newDarkMode = !darkmode;
    if (newDarkMode) {
      document.body.classList.add('theme-dark');
      localStorage.setItem('isdarkMode', 'true');
    } else {
      document.body.classList.remove('theme-dark');
      localStorage.setItem('isdarkMode', 'false');
    }
    setUserData({ darkmode: newDarkMode });
  };

  return (
    <div className="header-wrapper shadow-bg">
      <div className="right-block">
        <div className="theme-toggle-btn-block">
          <button className="theme-toggle-btn" onClick={() => switchThemes()}>
            <img src="img/theme-light.svg" alt="Light Theme" />
          </button>
        </div>
        {/* Profile dropdown */}
        <div className="profile-select-block">
          <div className="btn-group profile-dropdown">
            <button
              type="button"
              className="prof-avt-btn prof-avt dropdown-toggle"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              <img className="img-light-theme" src="img/usr-prof.png" alt="User Profile" />
              <img className="img-dark-theme" src="img/user-def-dark.svg" alt="User Profile Dark" />
            </button>
            <div className="dropdown-menu dropdown-menu-end">
              <div className="dropdown-nav-cover">
                <div className="dropdown-nav-block">
                  <a className="dropdown-item">
                    <span className="icon">
                      <img src="img/prof-usr-icon.svg" alt="Profile Icon" />
                    </span>
                    My Profile
                  </a>
                </div>

                <div className="dropdown-nav-block">
                  <a className="dropdown-item" data-bs-toggle="modal" data-bs-target="#logoutModal">
                    <span className="icon">
                      <img src="img/prof-logout-icon.svg" alt="Logout Icon" />
                    </span>
                    Logout
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Navbar;