import React, { useState } from "react";
import { useSession } from "next-auth/react";
import WithoutLogin from "./sidebar/WithoutLogin";
import { useRouter } from "next/router";

interface HeaderContentProps {
  toggleLightMode: () => void;
  toggleDarkMode: () => void;
  toggleSideBar: () => void;
  moonButton: string;
  sunButton: string;
  userMenu: any;
}
const HeaderContent: React.FC<HeaderContentProps> = ({
  toggleLightMode,
  toggleDarkMode,
  toggleSideBar,
  moonButton,
  sunButton,
  userMenu,
}) => {
  const { data } = useSession();

  const [sidebarView, setSideBarView] = useState(false);
  const [sideBarSection, setSideBarSection] = useState<JSX.Element | null>(
    null,
  );
  const sideBarToggle = () => {
    setSideBarView(!sidebarView);
    if (data !== null) {
      toggleSideBar();
    } else {
      setSideBarSection(<WithoutLogin />);
    }
  };
  const { asPath } = useRouter();
  let menu_item_pos = "15px";
  let togglehideafterlogin;
  if (asPath === "/" && data) {
    menu_item_pos = "0px";
    togglehideafterlogin = "";
  } else {
    togglehideafterlogin = (
      <div className="nav-control">
        <div className="hamburger ">
          <span className="toggle-icon" onClick={sideBarToggle}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              className="bi bi-list"
              viewBox="0 0 16 16"
            >
              <path
                fillRule="evenodd"
                d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
              />
            </svg>
          </span>
        </div>
      </div>
    );
  }

  return (
    <>
      <div className="header">
        <div className="header-content clearfix">
          {togglehideafterlogin}

          <div className="menu_item" style={{ right: menu_item_pos }}>
            <div className="header-left header-new-css"></div>
            <div className="header-right">{userMenu}</div>
          </div>
        </div>
      </div>
      <div
        className={`nk-sidebar nk-sidebar-header d-md-block ${sidebarView ? "is-active" : ""} sidebar-custom-height`}
      >
        <div className="nk-nav-scroll">
          <ul className="metismenu" id="menu">
            {sideBarSection}
          </ul>
        </div>
      </div>
    </>
  );
};

export default HeaderContent;