import LogoIcon from "./icons/LogoIcon";
import {NAV_BOTTOM, NAV_ITEMS} from "../config/feedConstants";
import {NavIcons} from "./icons/NavIcons";
import Profile from "./profile/Profile";

export default function Sidebar({
  open,
  activeNav,
  onClose,
  onNavClick,
  onEditProfile,
  profileData = {},
  isAuthenticated,
  onLogout,
  onLoginClick,
}) {
  return (
      <>
        <div className={`f-overlay${open ? " show" : ""}`} onClick={onClose} />
        <div className={`f-sidebar${open ? " open" : ""}`}>
          <div className="f-sb-head">
            <div className="f-sb-logo"><LogoIcon /></div>
            <span className="f-sb-name">Находка</span>
          </div>
          <nav className="f-sb-nav">
            {NAV_ITEMS.map(({ icon, label }) => {
              const Ic = NavIcons[icon];
              const handleClick = () => {
                // «Мои объявления» и «Чат» требуют авторизации
                if (!isAuthenticated && (label === "Мои объявления" || label === "Чат")) {
                  onLoginClick();
                } else {
                  onNavClick(label);
                }
                onClose();
              };
              return (
                  <div
                      key={label}
                      className={`f-sb-item${activeNav === label ? " active" : ""}`}
                      onClick={handleClick}
                  >
                    <Ic /> {label}
                  </div>
              );
            })}
          </nav>
          <div className="f-sb-bottom">
            {NAV_BOTTOM.map(({ icon, label }) => {
              const Ic = NavIcons[icon];
              return (
                  <div
                      key={label}
                      className={`f-sb-item${activeNav === label ? " active" : ""}`}
                      onClick={() => { onNavClick(label); onClose(); }}
                  >
                    <Ic /> {label}
                  </div>
              );
            })}
            <div className="f-sb-divider" />

            {isAuthenticated ? (
              <>
                <Profile data={profileData} onEdit={onEditProfile} />
                <div
                  className="f-sb-item"
                  onClick={() => { onLogout(); onClose(); }}
                  style={{ color: "rgba(255,107,107,.7)", marginTop: 8 }}
                >
                  <span style={{ fontSize: "1.1rem" }}>🚪</span> Выйти
                </div>
              </>
            ) : (
              <div
                className="f-sb-item"
                onClick={() => { onLoginClick(); onClose(); }}
                style={{ color: "#2de0c8" }}
              >
                <span style={{ fontSize: "1.1rem" }}>🔑</span> Войти
              </div>
            )}
          </div>
        </div>
      </>
  );
}