src/sections/drawer/index.tsx

import { useState, useEffect } from "react";
import seiki from "../../assets/images/seiki.png";
import { BsSearch, BsChevronDown } from "react-icons/bs";
import { FaMapLocationDot, FaLocationDot } from "react-icons/fa6";
import { AiFillCar, AiFillDatabase } from "react-icons/ai";
import { RiDashboardFill } from "react-icons/ri";
import { IoFootstepsSharp, IoStatsChartSharp } from "react-icons/io5";
import { FaBusAlt, FaInfoCircle, FaMapMarkedAlt } from "react-icons/fa";
import { Poi } from "../../redux/types/Poi";
import FootfallSection from "../footfall";

type DrawerSectionProps = {
  poiList: Poi[];
  setSelectedPoi: React.Dispatch<React.SetStateAction<Poi>>;
  isFootfallSection: boolean;
  setFootfallSection: React.Dispatch<React.SetStateAction<boolean>>;
  isModeSection: boolean;
  setModeSection: React.Dispatch<React.SetStateAction<boolean>>;
  isDemographicsSection: boolean;
  setDemographicsSection: React.Dispatch<React.SetStateAction<boolean>>;
  isInformationSection: boolean;
  setInformationSection: React.Dispatch<React.SetStateAction<boolean>>;
  isTraficSection: boolean;
  setTraficSection: React.Dispatch<React.SetStateAction<boolean>>;
  isMapView: boolean;
  setIsMapView: React.Dispatch<React.SetStateAction<boolean>>;
};

const DrawerSection: React.FC<DrawerSectionProps> = ({
  poiList,
  setSelectedPoi,
  isFootfallSection,
  setFootfallSection,
  isModeSection,
  setModeSection,
  isDemographicsSection,
  setDemographicsSection,
  isInformationSection,
  setInformationSection,
  isTraficSection,
  setTraficSection,
  isMapView,
  setIsMapView,
}) => {
  const [open, setOpen] = useState(true);
  const [submenuOpen, setSubmenuOpen] = useState(false);

  const Menus = [
    {
      title: "Points of interest",
      icon: <FaLocationDot />,
      submenu: true,
      submenuItems: poiList,
    },
    {
      title: "Footfall",
      icon: <IoFootstepsSharp />,
    },
    {
      title: "Mode",
      icon: <AiFillCar />,
    },
    {
      title: "Demographics",
      icon: <IoStatsChartSharp />,
    },
    {
      title: "Section info",
      icon: <FaInfoCircle />,
    },
    {
      title: "Trafic data",
      icon: <AiFillDatabase />,
    },
  ];

  return (
    <div
      className={`p-5 pt-8 ${open ? "w-72" : "w-20"} duration-300 relative`}
      style={{ height: "100%", backgroundColor: "#191F20" }}
    >
      <div className="inline-flex">
        <img
          src={seiki}
          width={40}
          height={100}
          className={`text-4xl rounded cursor-pointer block float-left mr-4 duration-500 ${
            open && "rotate-[360deg]"
          }`}
          onClick={() => setOpen(!open)}
        />
        <h1
          className={`text-white origin-left font-medium text-2xl duration-300 ${
            !open && "scale-0"
          }`}
          style={{ fontFamily: "airbnb_semi_bold", fontSize: 35 }}
        >
          seiki
        </h1>
      </div>

      <div
        className={`flex items-center rounded-md bg-light-white mt-6 ${
          !open ? "px-2.5" : "px-4"
        } py-2`}
      >
        <BsSearch
          className={`text-white text-lg block float-left cursor-pointer ${
            open && "mr-2"
          }`}
        />
        <input
          type={"search"}
          placeholder="Search"
          className={`text-base bg-transparent w-full text-white focus:outline-none ${
            !open && "hidden"
          }`}
        />
      </div>

      <ul className="pt-2">
        <li
          className={`text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2
              hover:bg-light-white rounded-md mb-2`}
        >
          <span className="text-2xl block float-left">
            <FaLocationDot />
          </span>
          <span
            className={`text-base font-medium flex-1 duration-200 ${
              !open && "hidden"
            }`}
            style={{ fontFamily: "airbnb_light" }}
          >
            Points of interest
          </span>
          {open && (
            <BsChevronDown
              className={`${submenuOpen && "rotate-180"}`}
              onClick={() => {
                setSubmenuOpen(!submenuOpen);
              }}
            />
          )}
        </li>
        {submenuOpen && open && (
          <ul>
            {Menus[0].submenuItems ? (
              Menus[0].submenuItems.map((submenuItem, index) => (
                <li
                  onClick={() => {
                    setSelectedPoi(submenuItem);
                  }}
                  key={index}
                  className="text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2 px-5
              hover:bg-light-white rounded-md"
                  style={{ fontFamily: "airbnb_light" }}
                >
                  {submenuItem.address}
                </li>
              ))
            ) : (
              <></>
            )}
          </ul>
        )}
        <li
          className={`text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2
              hover:bg-light-white rounded-md mb-2 ${
                isFootfallSection ? "" : "bg-light-white"
              }`}
          onClick={() => {
            setFootfallSection(!isFootfallSection);
          }}
        >
          <span className="text-2xl block float-left">
            <IoFootstepsSharp />
          </span>
          <span
            className={`text-base font-medium flex-1 duration-200 ${
              !open && "hidden"
            }`}
            style={{ fontFamily: "airbnb_light" }}
          >
            Footfall
          </span>
        </li>

        <li
          className={`text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2
              hover:bg-light-white rounded-md mb-2 ${
                isModeSection ? "" : "bg-light-white"
              }`}
          onClick={() => {
            setModeSection(!isModeSection);
          }}
        >
          <span className="text-2xl block float-left">
            <AiFillCar />
          </span>
          <span
            className={`text-base font-medium flex-1 duration-200 ${
              !open && "hidden"
            }`}
            style={{ fontFamily: "airbnb_light" }}
          >
            Mode
          </span>
        </li>

        <li
          className={`text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2
              hover:bg-light-white rounded-md mb-2 ${
                isDemographicsSection ? "" : "bg-light-white"
              }`}
          onClick={() => {
            setDemographicsSection(!isDemographicsSection);
          }}
        >
          <span className="text-2xl block float-left">
            <IoStatsChartSharp />
          </span>
          <span
            className={`text-base font-medium flex-1 duration-200 ${
              !open && "hidden"
            }`}
            style={{ fontFamily: "airbnb_light" }}
          >
            Demographics
          </span>
        </li>

        <li
          className={`text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2
              hover:bg-light-white rounded-md mb-2 ${
                isInformationSection ? "" : "bg-light-white"
              }`}
          onClick={() => {
            setInformationSection(!isInformationSection);
          }}
        >
          <span className="text-2xl block float-left">
            <FaInfoCircle />
          </span>
          <span
            className={`text-base font-medium flex-1 duration-200 ${
              !open && "hidden"
            }`}
            style={{ fontFamily: "airbnb_light" }}
          >
            Section info
          </span>
        </li>

        <li
          className={`text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2
              hover:bg-light-white rounded-md mb-2 ${
                isTraficSection ? "" : "bg-light-white"
              }`}
          onClick={() => {
            setTraficSection(!isTraficSection);
          }}
        >
          <span className="text-2xl block float-left">
            <AiFillDatabase />
          </span>
          <span
            className={`text-base font-medium flex-1 duration-200 ${
              !open && "hidden"
            }`}
            style={{ fontFamily: "airbnb_light" }}
          >
            Trafic data
          </span>
        </li>

        <li
          className={`text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2
              hover:bg-light-white rounded-md mb-2 ${
                isTraficSection ? "" : "bg-light-white"
              }`}
          onClick={() => {
            setIsMapView(!isMapView);
          }}
        >
          <span className="text-2xl block float-left">
            <FaMapMarkedAlt />
          </span>
          <span
            className={`text-base font-medium flex-1 duration-200 ${
              !open && "hidden"
            }`}
            style={{ fontFamily: "airbnb_light" }}
          >
            Map View
          </span>
        </li>
      </ul>
    </div>
  );
};

export default DrawerSection;