import { useEffect, useState } from "react";
import {Link, useLocation} from 'react-router-dom'
import RouteLinks from "../../../RouteLinks";
import DummyLogo from "../../DummyLogo";
import MainBtn from "../../MainBtn";
import AsideLink from "./AsideLink";
import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
import { useSelector } from "react-redux";
import { GeneralLayoutContext } from "../../../context/GeneralLayoutContext";
import { TbLogout2 } from "react-icons/tb";


export default function DashboardAside({shrinkAside=false}) {

    const {pathname} = useLocation()

    const {setLogoutModal} = GeneralLayoutContext()

    const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
    const {role}= userDetails

    const [hideSubMenu, setHideSubMenu] = useState('')

    const handleHideSubMenu = (name) => {
        // e.stopPropagation()
        setHideSubMenu((prev) => {
            if(prev == name){
                return ''
            }else{
                return name
            }
        })
    }

  return (
    <div className='w-full h-full flex flex-col'>
        <div className="px-4 w-full h-24 logo flex items-center">
            <DummyLogo />
        </div>
        <hr className="border-slate-400" />

        <div className="p-4 w-full flex flex-col gap-2 h-full overflow-y-auto">
            {asideNavLinks.map((link, index) => {
                let active = link.status == 1 ? true : false
                let hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false
                if(active && !hasSubLinks){
                    return (
                        <div key={index}>
                            <AsideLink key={index} to={link.to} shrinkAside={shrinkAside} name={link.name} icon={link.icon} />
                        </div>
                    )
                }else if(active && hasSubLinks){
                    return (
                    <div key={index} className="w-full">
                        {link.title &&
                            <h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">{link.title}</h1>
                        }
                        <AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name={link.name} icon={link.icon}>
                            <>
                            {link.subLinks.map((subItem, index)=>{
                                let active = subItem.status == 1 ? true : false
                                if(active){
                                    return (
                                    <div key={index}>
                                        <AsideLink key={index} to={subItem.to} shrinkAside={shrinkAside} name={subItem.name} icon={subItem.icon} />
                                    </div>
                                )
                                }
                            })}
                            </>
                        </AsideLinkWithSubLinks>
                    </div>
                    )
                }else{
                    return null
                }
            })}
        </div>
        <div className='px-4 py-2'>
            <div className="bg-primary rounded w-full flex justify-center items-center gap-2">
                <MainBtn
                    shrinkAside={shrinkAside} 
                    text='Logout' 
                    className="w-full text-center flex justify-center gap-2 items-center" 
                    onClick={()=>setLogoutModal(true)}
                >
                    <TbLogout2 className="text-base" />
                </MainBtn>
            </div>
        </div>
    </div>
  )
}

const asideNavLinks = [
    {name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage},
    {name:'Salary Loan', title:'Loan', status:1, icon: 'money', subLinks: [
        {name: 'Selected Loans', status:1, icon: 'dot', to: RouteLinks.selectedLoanPage},
        {name: 'Applications', status:1, icon: 'dot', to: RouteLinks.applicationsLoanPage},
        {name: 'Approved Loans', status:1, icon: 'dot', to: RouteLinks.approvedLoansPage},
        {name: 'Disbursements', status:1, icon: 'dot', to: RouteLinks.disbursementsLoanPage},
        {name: 'Payments', status:1, icon: 'dot', to: '#'},
        {name: 'Configurations', status:1, icon: 'dot', to: '#'},
        ],
    },
    {name:'Product 2', title:'Product 2', status:1, icon: 'product', subLinks: [
        {name: 'Applications', status:1, icon: 'dot', to: '#'},
        {name: 'Configuration', status:1, icon: 'dot', to: '#'},
        ]
    },
    {name:'Product 3', title:'Product 3', status:1, icon: 'product', subLinks: [
        {name: 'Applications', status:1, icon: 'dot', to: '#'},
        {name: 'Configuration', status:1, icon: 'dot', to: '#'},
        ]
    },
    {name:'Administration', title:'Admin', status:1, icon: 'people', subLinks: [
        {name: 'Users', status:1, icon: 'dot', to: RouteLinks.usersPage},
        ]
    },
]