import React from 'react';

import {useState , useEffect} from "react"
import useAuthUser from 'react-auth-kit/hooks/useAuthUser';
import AsideRender from './AsideRender';
import {handleLinkClick} from "./Helpers"
import HasIdValidation from "../LeumasID/HasIdValidation";
import { FaUsers } from "react-icons/fa";
import { IoIosNotifications } from "react-icons/io";
import {useTheme} from "../Theme/ThemeContext"
import { FaBars, FaTimes } from 'react-icons/fa';
const Aside = ({ isOpen, toggleAside, setMode, onLinksComputed = () => {}, getInitialLinks = () => [] , leumasId, setLeumasId ,  linkDataArray }) => {

  const { theme } = useTheme();

  const [currentIndex, setCurrentIndex] = useState(0);



  
  const [extraData, setExtraData] = useState({});
  const auth = useAuthUser();
  const [openDropdown, setOpenDropdown] = useState(null);
  const [loading, setLoading] = useState(true);
  const [links, setLinks] = useState([]);



  // Now you can call getInitialLinks here
  useEffect(() => {
    // Load initial links using getInitialLinks passed via props
    setLinks(getInitialLinks( setMode, auth?.token, auth?.id, extraData));
}, [setMode, auth?.id, extraData]); // Include getInitialLinks in the dependency array


useEffect(() => {
  const fetchData = async () => {
      try {
       
        // const result2 = await getItemsByOwner("Conversation", auth?.id, "LeumasAPI", auth?.token);
        setExtraData({
          default: 'test'
          //   aiModels: result1,
            // conversations: result2,
        });
      
        // setLinks(getInitialLinks(handleDeleteConversation, setMode , auth?.token, auth?.id , result1));
          setLoading(false);
      } catch (error) {
          console.error("Error fetching conversations:", error);
      }
  }

  fetchData();
}, [auth?.id, setMode]); // This effect runs once when the component mounts.
useEffect(() => {
  // console.log('linkDataArray:', linkDataArray);

  if (currentIndex !== 0 || !getInitialLinks) {
    const currentLinkData = linkDataArray[currentIndex];
    if (currentLinkData) {
      setLinks(currentLinkData.getInitialLinks(setMode, auth?.token, auth?.id, extraData));
    }
  }
}, [currentIndex, linkDataArray, setMode, extraData, getInitialLinks]);


useEffect(() => {
if (extraData.aiModelsResult1 && extraData.aiModelsResult2) {
    setLinks(getInitialLinks( setMode, auth?.token, auth?.id, extraData));
    console.log(extraData)
}
}, [extraData, setMode]);


useEffect(() => {
  // This runs only once on mount, so make sure it doesn't conflict with the initial loading
  const computedLinks = getInitialLinks( setMode, auth?.token, auth?.id, extraData);
  onLinksComputed(computedLinks);
}, []); // Empty dependency array to run only on mount



if (loading) {
  return <div>Loading...</div>; // Render loading state
}

    
  return (
<aside className={`${theme === 'light' ? 'bg-gray-50 border-gray-200' : 'bg-black border-gray-900'} ${isOpen ? 'absolute' : 'hidden'} w-64 h-full p-4 overflow-y-auto z-20 top-0 left-0 m-0 rounded-lg border-r-2 transition-all duration-300 ease-in-out`}>


    {/* Aside content */}
    {isOpen && (
        <ul className={`flex flex-col gap-2`}>
            <AsideRender
                links={links}
                handleLinkClick={(link) => handleLinkClick(link, setMode, setOpenDropdown, openDropdown)}
                openDropdown={openDropdown}
                setMode={setMode}
            />
        </ul>
    )}
</aside>
  )
}



export default Aside;