import React, { useContext, useEffect } from "react";
import { useSelector } from "react-redux";
import { NavLink } from "react-router-dom";
import {
  default as logo,
  default as logo3,
} from "../../assets/images/wrenchboard.png";
import DarkModeContext from "../Contexts/DarkModeContext";
import Icons from "../Helpers/Icons";

export default function Sidebar({
  sidebar,
  action,
  logoutModalHandler,
  myJobList,
}) {
  const darkMode = useContext(DarkModeContext);

  let { userDetails } = useSelector((state) => state.userDetails);
  //const jobLists =  getJobList(); // pass from upper - we need in a lot of places
  let { jobLists } = useSelector((state) => state.jobLists);
  const marketData = jobLists?.result_list;
  let noOfJobs = marketData?.length <= 0 ? "0" : marketData?.length;

  useEffect(() => {
    const title = document.querySelectorAll(".menu-setting-items .heading");
    if (sidebar) {
      title.forEach((elm) => {
        elm.classList.add("active");
      });
    } else {
      title.forEach((elm) => {
        elm.classList.remove("active");
      });
    }
  }, [jobLists]);
  return (
    <div className="w-full h-full">
      {/* logo-area */}
      <div
        className={`w-full flex items-center transition-all duration-300 ease-in-out ${
          sidebar ? "justify-between  mb-14" : "justify-center"
        }`}
      >
        <div className={`sidebar-logo ${sidebar ? "enter" : ""}`}>
          {darkMode.theme === "light" ? (
            <img src={logo} alt="nft" />
          ) : (
            <img src={logo3} alt="nft" />
          )}
        </div>

        <span onClick={action}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="25"
            height="19"
            viewBox="0 0 25 19"
            fill="none"
          >
            <path
              d="M24.3544 8.45953L16.9855 0.271831C16.8283 0.0982522 16.6089 0 16.3763 0H11.4637C11.1411 0 10.848 0.189955 10.7153 0.484712C10.5843 0.781107 10.6384 1.12663 10.8545 1.36571L17.7306 9.00647L10.8545 16.6456C10.6384 16.8863 10.5827 17.2318 10.7153 17.5266C10.848 17.823 11.1411 18.0129 11.4637 18.0129H16.3763C16.6089 18.0129 16.8283 17.913 16.9855 17.7427L24.3544 9.55505C24.6344 9.24391 24.6344 8.76903 24.3544 8.45953Z"
              fill="url(#paint0_linear_159_67708)"
            />
            <path
              d="M13.7104 8.45953L6.34148 0.271831C6.18427 0.0982522 5.96484 0 5.73231 0H0.819691C0.497095 0 0.203976 0.189955 0.071335 0.484712C-0.0596682 0.781107 -0.00562942 1.12663 0.210526 1.36571L7.08656 9.00647L0.210526 16.6456C-0.00562942 16.8863 -0.0613058 17.2318 0.071335 17.5266C0.203976 17.823 0.497095 18.0129 0.819691 18.0129H5.73231C5.96484 18.0129 6.18427 17.913 6.34148 17.7427L13.7104 9.55505C13.9904 9.24391 13.9904 8.76903 13.7104 8.45953Z"
              fill="url(#paint1_linear_159_67708)"
            />
            <defs>
              <linearGradient
                id="paint0_linear_159_67708"
                x1="10.644"
                y1="0"
                x2="28.9548"
                y2="13.8495"
                gradientUnits="userSpaceOnUse"
              >
                <stop stopColor="#F539F8" />
                <stop offset="0.416763" stopColor="#C342F9" />
                <stop offset="1" stopColor="#5356FB" />
              </linearGradient>
              <linearGradient
                id="paint1_linear_159_67708"
                x1="0"
                y1="0"
                x2="18.3108"
                y2="13.8495"
                gradientUnits="userSpaceOnUse"
              >
                <stop stopColor="#F539F8" />
                <stop offset="0.416763" stopColor="#C342F9" />
                <stop offset="1" stopColor="#5356FB" />
              </linearGradient>
            </defs>
          </svg>
        </span>
      </div>
      {/* menu and settings item */}
      <div className="menu-setting-items mb-11">
        {/* menus item */}
        <div
          className={`menu-item transition-all duration-300 ease-in-out ${
            sidebar ? "mb-5" : "mb-2"
          }`}
        >
          <div className="heading mb-5">
            <h1 className="title text-xl font-bold text-sky-blue">Menu</h1>
          </div>
          <div className="items">
            <ul className="flex flex-col space-y-6">
              {/* Using mini component reduces the bulk amount of html */}
              <ListItem
                title="Dashboard"
                route="/"
                sidebar={sidebar}
                iconName="new-dashboard"
              />
              {userDetails && userDetails?.account_type !== "FAMILY" && (
                <ListItem
                  title="Market"
                  route="/market"
                  bubble={noOfJobs}
                  sidebar={sidebar}
                  iconName="new-market"
                />
              )}

              <ListItem
                title="My Task(s)"
                route="/mytask"
                sidebar={sidebar}
                iconName="new-mytask"
              />
            </ul>
          </div>
        </div>

        {/* menu and settings item */}
        {userDetails?.account_type !== "FAMILY" && (
          <div
            className={`menu-item transition-all duration-300 ease-in-out ${
              sidebar ? "my-5" : ""
            }`}
          >
            <div className="heading mb-5">
              <h1 className="title text-xl font-bold text-sky-blue">Family</h1>
            </div>
            <div className="items">
              <ul className="flex flex-col space-y-6">
                <ListItem
                  title="Family Corner"
                  route="/acc-family"
                  iconName="new-family"
                  sidebar={sidebar}
                />
              </ul>
            </div>
          </div>
        )}
        {userDetails?.account_type !== "FAMILY" && (
          <>
            {!userDetails?.post_jobs ? (
              <div
                className={`menu-item transition-all duration-300 ease-in-out bg-[#f0f8ff] dark:bg-dark-white rounded-2xl p-3 ${
                  sidebar ? "mb-5" : "mb-2 rounded-none p-0"
                }`}
              >
                <div className="heading mb-5">
                  <h1 className="title text-xl font-bold text-sky-blue">
                    Job Post
                  </h1>
                </div>
                <div className="items">
                  <ul className="flex flex-col space-y-6">
                    <li className="item group">
                      <NavLink
                        to="/start-job"
                        className={`nav-item flex items-center ${
                          ((navData) => (navData.isActive ? "active" : ""),
                          sidebar
                            ? "justify-start space-x-3.5"
                            : "justify-center")
                        }`}
                      >
                        <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
                          <Icons name="people-two" />
                        </span>
                        <span
                          className={`item-content group-hover:text-sky-blue text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                            sidebar ? "active flex-1" : "w-0"
                          }`}
                        >
                          Enable Job Post
                        </span>
                      </NavLink>
                    </li>
                  </ul>
                </div>
              </div>
            ) : myJobList?.data?.result_list?.length ? (
              <div
                className={`menu-item transition-all duration-300 ease-in-out ${
                  sidebar ? "mb-5" : "mb-2"
                }`}
              >
                <div className="heading mb-5">
                  <h1 className="title text-xl font-bold text-sky-blue">
                    My Jobs
                  </h1>
                </div>
                <div className="items">
                  <ul className="flex flex-col space-y-6">
                    {[
                      {
                        name: "List",
                        path: "/myjobs",
                        iconName: "people-two",
                      },
                      {
                        name: "Pending",
                        path: "/my-pending-jobs",
                        iconName: "people-two",
                      },
                      {
                        name: "Active",
                        path: "/my-active-jobs",
                        iconName: "people-two",
                      },
                    ].map(({ name, path, iconName }, idx) => (
                      <ListItem
                        key={idx}
                        title={name}
                        route={path}
                        sidebar={sidebar}
                        iconName={iconName}
                      />
                    ))}
                  </ul>
                </div>
              </div>
            ) : (
              <div
                className={`menu-item transition-all duration-300 ease-in-out ${
                  sidebar ? "mb-5" : "mb-2"
                }`}
              >
                <div className="heading mb-5">
                  <h1 className="title text-xl font-bold text-sky-blue">
                    My Jobs
                  </h1>
                </div>
                <div className="items">
                  <ul className="flex flex-col space-y-6">
                    <ListItem
                      title="Add Job"
                      route="/myjobs"
                      iconName="people-two"
                      sidebar={sidebar}
                      popup={true}
                    />
                  </ul>
                </div>
              </div>
            )}
          </>
        )}
      </div>
      {/* signout area */}
      {sidebar ? (
        <button
          onClick={logoutModalHandler}
          type="button"
          className="signout-btn flex items-center space-x-1  p-2.5 w-2/3 h-[52px] bg-sky-blue transition duration-300 ease-in-out hover:bg-gray-900 rounded-full"
        >
          <span className="">
            <Icons name="new-logout" />
          </span>
          <span
            className={`signout-btn-content text-white text-xl font-bold ${
              sidebar ? "active" : ""
            }`}
          >
            {process.env.REACT_APP_LOGOUT_TEXT}
          </span>
        </button>
      ) : (
        <button
          onClick={logoutModalHandler}
          type="button"
          className="signout-btn w-full flex items-center justify-center"
        >
          <span className="p-[1px] w-[40px] h-[40px] border border-purple rounded-full">
            <Icons name='new-logout' />
          </span>
        </button>
      )}
    </div>
  );
}

const ListItem = ({ sidebar, route, title, bubble, iconName, popup }) => {
  return (
    <li className={`item group`}>
      <NavLink
        to={route}
        state={popup ? { popup: true } : { popup: false }}
        className={`nav-item flex items-center  ${
          ((navData) => (navData.isActive ? "active" : ""),
          sidebar ? "justify-start space-x-3.5" : "justify-center")
        }`}
      >
        <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
          <Icons name={iconName} />
        </span>
        <span
          className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
            sidebar ? "active flex-1" : "w-0"
          }`}
        >
          {title && title}
          {bubble && (
            <span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
              {bubble}
            </span>
          )}
        </span>
      </NavLink>
    </li>
  );
};