"use client";

import { AiFillHome, AiOutlineHome } from "react-icons/ai";
import { useEffect, useRef, useState } from "react";
import { usePathname, useRouter } from "next/navigation";
import { BsInfoSquare, BsInfoSquareFill } from "react-icons/bs";
import { MdArticle, MdOutlineArticle } from "react-icons/md";
import { FaRegUser, FaUser } from "react-icons/fa";
import { RiUserAddFill, RiUserAddLine } from "react-icons/ri";

const APPBAR_ITEMS = [
  {
    icon: AiOutlineHome,
    acriveIcon: AiFillHome,
    href: "/",
    title: "خانه",
  },
  {
    icon: FaRegUser,
    acriveIcon: FaRegUser,
    href: "/login",
    title: "ورود",
  },
  {
    icon: RiUserAddLine,
    acriveIcon: RiUserAddFill,
    href: "/student-registration",
    title: "ثبت نام",
  },
  {
    icon: BsInfoSquare,
    acriveIcon: BsInfoSquareFill,
    href: "/about-us",
    title: "درباره ما",
  },
];

const getIsActiveHandler = (path) => {
  let activeIndex = "*";
  APPBAR_ITEMS.forEach((item, index) => {
    if (item.href == path) {
      activeIndex = index;
    }
  });
  return activeIndex;
};

export default function AppBarCm() {
  const pathname = usePathname();
  const route = useRouter();
  const appBarRefs = useRef();
  const [isActive, setIsActive] = useState(getIsActiveHandler(pathname));

  const handleAnimate = (node) => {
    appBarRefs?.[isActive]?.animate(
      {
        opacity: ["1", "0", "1"],
      },
      {
        duration: 600,
        iterations: 1,
        fill: "forwards",
      }
    );
    appBarRefs[node].animate(
      {
        marginTop: ["0px", "-110px"],
        opacity: ["1", "0"],
      },
      {
        duration: 300,
        iterations: 1,
        fill: "forwards",
      }
    ).onfinish = () => {
      setIsActive(node);
      appBarRefs[node].style.marginTop = "110px";
      route.push(APPBAR_ITEMS[node].href);
      appBarRefs[node].animate(
        {
          marginTop: ["110px", "0px"],
          opacity: ["0", "1"],
        },
        {
          duration: 300,
          iterations: 1,
          fill: "forwards",
        }
      );
    };
  };

  useEffect(() => {
    setIsActive(getIsActiveHandler(pathname));
  }, [pathname]);

  return (
    <div className="hidden w-[calc(100%-32px)]  left-4 rounded-full !m-auto bottom-5 h-[64px] bg-primary-700 fixed z-[10000] max-[700px]:block">
      <ul className="flex items-center justify-evenly h-full text-white">
        {APPBAR_ITEMS.map((item, index) => (
          <li
            className={
              "flex justify-center flex-col items-center" +
              (isActive == index ? " font-semibold text-secondary-main" : "")
            }
            ref={(el) => (appBarRefs[index] = el)}
            onClick={() => handleAnimate(index)}
            key={"appbar_item_" + index}
          >
            {isActive == index ? (
              <item.acriveIcon fontSize={item.href == "/about-us" ? 22 : 22} />
            ) : (
              <item.icon fontSize={item.href == "/about-us" ? 22 : 22} />
            )}
            <span className="text-[12px] order-last !text-white">
              {item.title}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}