"use client"

import { User } from "@/src/database/models/user";
import { useRouter } from "next/navigation";
import { ReactElement, useEffect, useState } from "react"
import Card from "../Card";
import { Bars3Icon, ChevronDownIcon, ChevronRightIcon, XMarkIcon } from "@heroicons/react/24/outline";

interface Navigation{
  icon: ReactElement;
  name: string;
  path: string;
  skipRootPath?: boolean;
  active?: boolean;
  id?: string;
  groupId?: string;
}

interface BreadcrumbPath {
  text: string,
  path: string,
}

interface Props{
  branding: ReactElement;
  navigation: Navigation[];
  rootPath: string;
  currentUser: {
    _id: string,
    name: string,
    email: string,
    profile: string
  };
  breadcrumb: BreadcrumbPath[];
  renderContent: () => ReactElement;
  addActivePathToBreacrumb?: boolean;
  collapseDefault?: boolean;
}

export const LeftNav = (props: Props) => {
  
  const router = useRouter();
  const [activePage, setActivePage] = useState<Navigation>();
  const [currentBreadcrumb, setCurrentBreadcrumb] = useState<BreadcrumbPath[]>(props.breadcrumb);
  const [collapse, setCollapse] = useState(true);
  const [expandedGroup, setExpandedGroup] = useState<any>({});

  useEffect(() => {
    const activeNavigation = props.navigation.find(item => item.active && item.id === undefined);
    if(activeNavigation && !Array.isArray(activeNavigation)){
      if(props.addActivePathToBreacrumb){
        const breadcrumb: BreadcrumbPath[] = [...props.breadcrumb];
        breadcrumb.push({
          text: activeNavigation.name,
          path: activeNavigation.path
        });
        setCurrentBreadcrumb(breadcrumb);
      }
      setActivePage(activeNavigation);
    }
  }, [props.navigation]);

  useEffect(() => {
    setCollapse(props.collapseDefault ?? false);
  }, [props.collapseDefault]);

  const renderNavigationItem = (navigation: Navigation) => {
    return (
      <div className={`flex flex-row flex-wrap items-center w-full py-3 px-4 cursor-pointer hover:bg-primary-400 hover:text-white rounded-md mb-2 ${(navigation.active || (navigation.id && expandedGroup[navigation.id])) ? "bg-primary-400 text-white" : ""}`} onClick={() => {
        if(navigation.path !== "" && !navigation.id){
          router.push((navigation.skipRootPath ? "/" : props.rootPath) + navigation.path);
        }else if(navigation.id){
          const localExapndedGroup = {...expandedGroup};
          localExapndedGroup[navigation.id] = !localExapndedGroup[navigation.id],

          setExpandedGroup(localExapndedGroup);
        }
      }} key={navigation.path}>
        <div className={`${collapse ? "w-full justify-center" : "w-1/6"} text-center flex flex-wrap flex-row items-center ${navigation.groupId ? 'justify-center' : ""}`}>
          {navigation.icon}
        </div>
        {!collapse && <div className={`${navigation.id ? 'w-2/3' : 'w-5/6'} text-md h-full ${navigation.groupId ? 'text-sm' : ""}`}>
          {navigation.name}
        </div>}
        {!collapse && navigation.id && <div className="w-1/6 text-right">
          {expandedGroup[navigation.id] ? <ChevronDownIcon className="h-6 w-6 ml-auto" />  : <ChevronRightIcon className="h-6 w-6 ml-auto" />}
        </div>}
      </div>
    )
  }

  const renderNavigation = () => {
    return (
      <>
        {props.navigation.map((eachNavigation: Navigation, index: number) => {
          return (
            <span key={index} >
              {(!eachNavigation.groupId || expandedGroup[eachNavigation.groupId]) && renderNavigationItem(eachNavigation)}
            </span>
          )
        })}
      </>
    )
  };

  const renderProfile = () => {
    return (
      <div className="flex flex-wrap flex-row items-center gap-4">
        <img src={props.currentUser.profile} alt={props.currentUser.name} className="w-10 h-10 object-cover rounded-full"/>
        <div>
          <div>{props.currentUser.name}</div>
          <div>{props.currentUser.email}</div>
        </div>
      </div>
    )
  }

  const renderMenuCollapse = () => {
    return (
      <div className="flex flex-wrap flex-row items-center cursor-pointer">
        {collapse && <Bars3Icon className="w-6 h-6" onClick={() => {
          setCollapse(false);
        }} />}
        {!collapse && <XMarkIcon className="w-6 h-6" onClick={() => {
          setCollapse(true);
        }} />}
      </div>
    )
  }

  const renderTopHeader = () => {
    return (
      <div className="bg-white z-1 shadow-md py-4 px-6 flex flex-wrap flex-row justify-between mb-4">
        {renderMenuCollapse()}
        {renderProfile()}
      </div>
    )
  }

  const renderBreadcrumb = () => {
    return (
      <div className="text-lg text-right flex flex-wrap flex-row items-center">
        {currentBreadcrumb.map((eachBreadcrumb: BreadcrumbPath, index: number) => {
          return (
            <div className="flex flex-wrap flex-row items-center" key={index}>
              {index !== 0 && (<div className="mx-2"> / </div>)}
              <a href={eachBreadcrumb.path} className="text-primary-400">
                {eachBreadcrumb.text}
              </a>
            </div>
          )
        })}
      </div>
    )
  }

  const renderPageTitle = () => {
    return (
      <Card
        containerClassName="bg-white shadow-md flex flex-wrap flex-row justify-between w-full rounded-md">
        <div className="text-2xl font-bold">
          {activePage?.name}
        </div>
        {renderBreadcrumb()}
      </Card>
    )
  }

  return (
    <div className="w-full min-h-[100vh] h-full flex flex-row flex-wrap relative items-stretch bg-slate-100 ">
      <div className={`${collapse ? "w-auto min-w-auto sm:block hidden" : "sm:w-[300px] sm:min-w-[300px] w-full min-w-full absolute h-full sm:h-auto sm:relative top-0 left-0 bg-white"} min-h-[100vh] py-4 px-2 shadow-xl z-10 bg-white`}>
        <div className={`${collapse ? 'w-full max-w-16 my-4' : "w-full max-w-60 m-auto mb-8 text-center"} cursor-pointer`} onClick={() => {
          router.push('/');
        }}>{props.branding}</div>
        {renderNavigation()}
      </div>
      <div className="flex-1 min-h-[100vh] h-full">
        {renderTopHeader()}
        <div className="p-4 flex flex-wrap flex-row justify-start gap-4">
          {renderPageTitle()}
          {props.renderContent()}
        </div>
      </div>
      {!collapse && <XMarkIcon className="w-8 h-8 fixed top-4 left-4 z-[11] sm:hidden" onClick={() => {
        setCollapse(true);
      }} />}
    </div>
  )
}