import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';

import sidebarFeilds from '../utils/sidebar';
import LogoutModal from './LogoutModal';

type SidebarProps = {
  userRole: string | null;
};

type RenderSideMenuProps = SidebarProps & {
  setIsSidebarCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
  isSidebarCollapsed: boolean;
};

type SidebarField = {
  logo: string;
  title: string;
  path: string;
  permissions: string[];
};

const sideFn = ({
  setIsSidebarCollapsed,
}: {
  setIsSidebarCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
}) => {
  const el = document.getElementsByClassName('body-wrapper');
  if (el?.[0]?.classList?.contains('nav-collapse')) {
    el?.[0]?.classList.remove('nav-collapse');
    localStorage.removeItem('sidestat');
    setIsSidebarCollapsed(false);
  } else {
    el?.[0]?.classList.add('nav-collapse');
    localStorage.setItem('sidestat', 'true');
    setIsSidebarCollapsed(true);
  }
};

const RenderSideMenu: React.FC<RenderSideMenuProps> = ({
  userRole,
  setIsSidebarCollapsed,
  isSidebarCollapsed,
}) => {
  const router = useRouter();
  const [showmodal, setShowModal] = useState(false);

  const logoutFn = () => {
    setShowModal(true);
  };

  const closeSidebar = () => {
    if (window.innerWidth < 991) {
      sideFn({ setIsSidebarCollapsed });
    }
  };

  return (
    <>
      <ul className="navbar-ul">
        {sidebarFeilds
          .filter((field: SidebarField) => field.permissions.includes(userRole || ''))
          .map(({ logo, title, path }: SidebarField) =>
            title === 'Logout' ? (
              <li className="nav-item" key={title}>
                <OverlayTrigger
                  placement="right"
                  overlay={
                    isSidebarCollapsed ? (
                      <Tooltip className="nav-tooltip">{title}</Tooltip>
                    ) : (
                      <span />
                    )
                  }
                >
                  <button
                    className={`nav-link pointer-cursor ${showmodal && 'active'}`}
                    onClick={logoutFn}
                  >
                    <span className="nav-icon">
                      <img src={logo} alt="" />
                    </span>
                    <span className="nav-label">{title}</span>
                  </button>
                </OverlayTrigger>
              </li>
            ) : path.startsWith('http') ? (
              <li className="nav-item" key={title}>
                <OverlayTrigger
                  placement="right"
                  overlay={
                    isSidebarCollapsed ? (
                      <Tooltip className="nav-tooltip">{title}</Tooltip>
                    ) : (
                      <span />
                    )
                  }
                >
                  <a className="nav-link" href={path} target="_blank" rel="noopener noreferrer">
                    <span className="nav-icon">
                      <img src={logo} alt="" />
                    </span>
                    <span className="nav-label">{title}</span>
                  </a>
                </OverlayTrigger>
              </li>
            ) : (
              <li className="nav-item" key={title}>
                <OverlayTrigger
                  placement="right"
                  overlay={
                    isSidebarCollapsed ? (
                      <Tooltip className="nav-tooltip">{title}</Tooltip>
                    ) : (
                      <span />
                    )
                  }
                >
                  <button
                    className={`nav-link ${
                      router.pathname &&
                      title &&
                      (router.pathname
                        ?.split('/')
                        .includes(title.toLowerCase().replace(/\s/g, '')) ||
                        router.pathname.toLowerCase().replace(/[\\/\s]/g, '') ===
                          title.split(' ')[0].toLowerCase().replace(/\s/g, ''))
                        ? 'active'
                        : ''
                    }`}
                    onClick={() => {
                      closeSidebar();
                      router.push(path);
                    }}
                  >
                    <span className="nav-icon">
                      <img src={logo} alt="" />
                    </span>
                    <span className="nav-label">{title}</span>
                  </button>
                </OverlayTrigger>
              </li>
            ),
          )}
      </ul>
      <LogoutModal showModal={showmodal} setShowModal={setShowModal} />
    </>
  );
};

const Sidebar: React.FC<SidebarProps> = ({ userRole }) => {
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState<boolean>(false);

  useEffect(() => {
    const storedState = localStorage.getItem('sidestat') === 'true';
    setIsSidebarCollapsed(storedState);
  }, []);

  return (
    <div className="nav-block">
      <div className="nav-block-inner">
        <div className="nav-logo-wrapper">
          <div className="logo-block">
            <Link className="nav-logo" href="/marketplace">
              <span className="logo-img">
                <img src="img/logo-img.svg" alt="" />
              </span>
              <span className="logo-txt">
                <img src="img/logo-propbase.svg" alt="" />
              </span>
            </Link>
          </div>
          <div className="toggle-btn-block">
            <button
              className="nav-toggle-btn"
              id="navToggleBtn"
              type="button"
              onClick={() => sideFn({ setIsSidebarCollapsed })}
            >
              <span className="line-cover">
                <span className="nav-line" />
                <span className="nav-line" />
                <span className="nav-line" />
              </span>
            </button>
          </div>
        </div>
        <div className="navbar-collapse-block custom-scroll">
          <RenderSideMenu
            userRole={userRole}
            isSidebarCollapsed={isSidebarCollapsed}
            setIsSidebarCollapsed={setIsSidebarCollapsed}
          />
        </div>
      </div>
    </div>
  );
};

export default Sidebar;