"use client"
import { LeftNav } from "@/src/components/base/dashboard/LeftNav";
import Logo from "@/src/assets/logo.jpg";
import Profile from "@/src/assets/profile.png";
import { ArrowRightStartOnRectangleIcon, BanknotesIcon, BriefcaseIcon, CalendarDaysIcon, ClipboardDocumentIcon, ClipboardDocumentListIcon, ClockIcon, Cog6ToothIcon, DocumentTextIcon, GlobeAltIcon, GlobeAsiaAustraliaIcon, HomeIcon, ListBulletIcon, LockClosedIcon, MegaphoneIcon, TagIcon, UserCircleIcon, UserGroupIcon, UserIcon } from "@heroicons/react/24/outline";
import { APIUrl, assetEndpointURL, careerId, eventId, eventTypeId, localBODId, localChapterId, membershipFeePaymentsId, nationalBODId, permissionId, positionId, registrationId, registrationQuestionId, roleId, tagEntryId, tagId, trainingHourId, userId } from "@/src/database/database";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import axios from "axios";
import { SelectRequestBody } from "@/src/components/base/DataStructure";

export default function Page(){
  const [userStorageId, setUserStorageId] = useState<string>();
  const [userData, setUserData] = useState<any>({});
  const endPointURL = `${APIUrl}/api/select`;
  const router = useRouter();

  useEffect(() => {
    const id = localStorage.getItem('userId');
    if(id){
      setUserStorageId(id);
    }else{
      router.push('/auth');
    }
  }, []);

  useEffect(() => {
    handleUserData();
  }, [userStorageId]);

  const handleUserData = async () => {
    
    const columns = ['role_id', 'name', 'email', 'profile_picture'];
    const formData = new FormData();
    const selectQuery: SelectRequestBody = {
      table: "users",
      columns: columns,
      where: [
        {
         condition: [
          {
            queryColumn: 'id',
            value: userStorageId ?? "",
            operator: "="
          }
         ] 
        }
      ],
      limit: 1,
    };
    formData.append('query', JSON.stringify(selectQuery));

    try {
      const queryRes = await axios.post(endPointURL, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      if(queryRes.data && queryRes.data["rows"] && queryRes.data["rows"][0]){
        setUserData(queryRes.data["rows"][0]);
        if(queryRes.data['rows'][0].role_id !== 8 && queryRes.data['rows'][0].role_id !== 9){
          router.push('/');
        }
      }
    }catch(err) {}

  };
  
  return (
    <LeftNav
      branding={<img src={Logo.src} className="w-80 m-auto mb-8" />}
      navigation={[
        {
          icon: <HomeIcon className="h-6 w-6" />,
          name: "Dashboard",
          active: true,
          path: "/",
        },
        {
          icon: <UserGroupIcon className="h-6 w-6" />,
          name: "LC Management",
          path: localChapterId,
          id: "lc_management"
        },
        {
          icon: <UserGroupIcon className="h-6 w-6" />,
          name: "Local Chapters",
          path: localChapterId,
          groupId: "lc_management"
        },
        {
          icon: <BanknotesIcon className="h-6 w-6" />,
          name: "Membership Fee Payments",
          path: membershipFeePaymentsId,
          groupId: "lc_management"
        },
        {
          icon: <GlobeAsiaAustraliaIcon className="h-6 w-6" />,
          name: "Local BODs",
          path: localBODId,
          groupId: "lc_management"
        },
        {
          icon: <GlobeAltIcon className="h-6 w-6" />,
          name: "NOM Management",
          path: nationalBODId,
          id: "nom"
        },
        {
          icon: <GlobeAltIcon className="h-6 w-6" />,
          name: "National BODs",
          path: nationalBODId,
          groupId: "nom"
        },
        {
          icon: <ClockIcon className="h-6 w-6" />,
          name: "Training Hours",
          path: trainingHourId,
          groupId: "nom"
        },
        {
          icon: <CalendarDaysIcon className="h-6 w-6" />,
          name: "Events",
          path: "",
          id: "events"
        },
        {
          icon: <ListBulletIcon className="h-6 w-6" />,
          name: "Event Types",
          path: eventTypeId,
          groupId: "events"
        },
        {
          icon: <MegaphoneIcon className="h-6 w-6" />,
          name: "Events",
          path: eventId,
          groupId: "events"
        },
        {
          icon: <TagIcon className="h-6 w-6" />,
          name: "Tags",
          path: tagId,
          groupId: "events"
        },
        {
          icon: <DocumentTextIcon className="h-6 w-6" />,
          name: "Registrations",
          path: registrationId,
          groupId: "events"
        },
        {
          icon: <ClipboardDocumentIcon className="h-6 w-6" />,
          name: "Registration Questions",
          path: registrationQuestionId,
          groupId: "events"
        },
        {
          icon: <UserIcon className="h-6 w-6" />,
          name: "JCI Members",
          path: userId,
          id: "members"
        },
        {
          icon: <BriefcaseIcon className="h-6 w-6" />,
          name: "Careers",
          path: careerId,
          groupId: "members"
        },
        {
          icon: <UserIcon className="h-6 w-6" />,
          name: "Users",
          path: userId,
          groupId: "members"
        },
        {
          icon: <Cog6ToothIcon className="h-6 w-6" />,
          name: "System Settings",
          path: "",
          id: "system"
        },
        {
          icon: <Cog6ToothIcon className="h-6 w-6" />,
          name: "Roles",
          path: roleId,
          groupId: "system",
        },
        {
          icon: <LockClosedIcon className="h-6 w-6" />,
          name: "Permissions",
          path: permissionId,
          groupId: "system",
        },
        {
          icon: <UserCircleIcon className="h-6 w-6" />,
          name: "Positions",
          path: positionId,
          groupId: "system",
        },
        {
          icon: <ArrowRightStartOnRectangleIcon className="h-6 w-6" />,
          name: "Log out",
          path: "auth/logout",
          skipRootPath: true
        }
      ]}
      rootPath="/dashboard/"
      renderContent={() => {
        return (
          <>
          </>
        )
      }}
      currentUser={{
        _id: "",
        name: userData?.name,
        email: userData?.email,
        profile: `${assetEndpointURL}/${userData?.profile_picture}`
      }}
      breadcrumb={[
        {
          text: "Dashboard",
          path: "/dashboard"
        },
      ]}
    />
  )
}