import { Image } from "antd";
import styles from "./sidebar.module.scss";
import { useState, FC, useEffect } from "react";
import cx from "classnames";
import { useRouter } from "next/router";

// props:any
const SideBar: FC<any> = ({ onClickHandler, content, params }: any) => {
  const [scroll, setScroll] = useState(false);

  const [selected, setSelected] = useState(0);
  const router = useRouter();
  const onSelected = (index: number) => {
    setSelected(index);
  };

  useEffect(() => {
    window.addEventListener("scroll", () => {
      setScroll(window.scrollY > 80);
    });
  }, []);
  useEffect(() => {
    let idx: any = -1;
    
    const valFin = params===""?router.query.val:params;

    content.map((item: any, index: number) => {
      if (item.name == valFin) {
        idx = index;
      }
    });
    setSelected(idx);
  }, [selected,router]);

  return (
    <div className={styles.sidebarContainer}>
      <ul>
        {content.map((item: any, index: number) => {
          return (
            <li
              key={index}
              className={
                selected == index ? styles.liclassSelected : styles.liclass
              }
              onClick={() => {
                onClickHandler(item);
                onSelected(index);
              }}
            >
              <button
                className={styles.button}
                
              >
                <Image
                  src={item.icon}
                  height="20px"
                  width="20px"
                  alt={`${item.name}`}
                  preview={false}
                />
                <span className={styles.text}>{item.name}</span>
              </button>
            </li>
          );
        })}
      </ul>
    </div>
  );
};
export default SideBar;