import {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";
import UserAvatar from '../../../assets/user_avatar.jpg'
import Icons from "../../Icons";

export default function DashboardAside() {

    const {pathname} = useLocation()

    const {setLogoutModal, activeMenu, handleActiveMenu} = generalLayoutContext()

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

  return (
    <div className='w-full h-full flex flex-col'>
        <div className="mb-3 w-full h-24 logo flex items-center">
            <DummyLogo />
        </div>
        {/* <hr className="border-slate-400" /> */}

        <div className="aside-scroll-design 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={link.name}>
                            <AsideLink to={link.to} name={link.name} icon={link.icon} />
                        </div>
                    )
                }
                if(active && hasSubLinks){
                    let subLinkList = []
                    link.subLinks.forEach(item =>{
                        if(item.to){
                            subLinkList.push(item.to)
                        }else if(item.subLinks?.length > 0){
                            item.subLinks.forEach(item => {
                                subLinkList.push(item.to)
                            })
                        }
                    })
                    return (
                    <div key={link.name} className="w-full">
                        {link.title &&
                            <h1 className="px-4 py-2 text-sm sm:text-sm text-slate-500 dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-500 dark:border-white">{link.title}</h1>
                        }
                        <AsideLinkWithSubLinks name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname) || index==1} >
                            <>
                            {link.subLinks.map((subItem, index)=>{
                                let active = subItem.status == 1 ? true : false
                                let hasSubLinks = (subItem.subLinks && subItem.subLinks.length > 0) ? true : false
                                if(active && !hasSubLinks){
                                    return (
                                    <div key={subItem.name}>
                                        <AsideLink to={subItem.to} name={subItem.name} icon={subItem.icon} />
                                    </div>
                                )
                                }else if(active && hasSubLinks){
                                    let subLinkList = subItem.subLinks.filter(value => value.to).map(item => { // specific open
                                        if(item.to){
                                            return item.to
                                        }
                                    })
                                    return(
                                        <AsideLinkWithSubLinks key={subItem.name} name={subItem.name} icon={subItem.icon} isOpen={subLinkList.includes(pathname)}>
                                            <>
                                            {subItem.subLinks.map((item, index)=>{
                                                let active = item.status == 1 ? true : false
                                                if(active){
                                                    return (
                                                    <div key={index}>
                                                        <AsideLink key={index} to={item.to} name={item.name} icon={item.icon} />
                                                    </div>
                                                )
                                                }
                                            })}
                                            </>
                                        </AsideLinkWithSubLinks>
                                    )
                                }else{
                                    return null
                                }
                            })}
                            </>
                        </AsideLinkWithSubLinks>
                    </div>
                    )
                }
            })}
        </div>

        <div className='py-2 mt-4 relative'>
            <div className="group w-full flex items-center gap-2">
                <div className="w-full flex items-center gap-2">
                    <img src={UserAvatar} alt='user avatar' className='w-12 h-12 p-1 rounded-full' />
                    <div>
                        <p className="text-sm font-bold text-black-body dark:text-white-body">Username</p>
                        <p className="text-12 text-black-box/90 dark:text-white-body/80">username@gmail.com</p>
                    </div>
                </div>
                <button onClick={()=>handleActiveMenu('settings')}  className="peer text-slate-500 dark:text-white-body">
                    <Icons name='settings' className='text-3xl' />
                </button>
                <div className="hidden group-hover:block pop-modal-down absolute p-4 w-full bg-white dark:bg-black-box left-0 bottom-[60%] rounded shadow-round_black dark:shadow-round_white">
                    <div className="w-full min-h-48 flex flex-col justify-between gap-4">
                        <div className="w-full h-full">
                            <div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
                                <h1 className="font-semibold">Username</h1>
                                <p className="-mt-2">username@gmail.com</p>
                            </div>
                        </div>
                        <div className="rounded w-full flex items-center gap-2">
                            <MainBtn
                                text='Logout' 
                                className="w-full text-center text-black-body hover:text-red-500 dark:text-white-body font-bold text-lg flex justify-center gap-2 items-center" 
                                onClick={()=>setLogoutModal(true)}
                            >
                                <TbLogout2 className="text-base" />
                            </MainBtn>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  )
}

const asideNavLinks = [
    {name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage},
    {name:'First Advance', title:'Loan', status:1, icon: 'arrow-right', subLinks: [
        {name: 'Transactions', status:1, icon: 'dot', to: RouteLinks.transactionsPage},
        {name: 'Loans', status:1, icon: 'dot', to: RouteLinks.loansPage},
        {name: 'Repayments', status:1, icon: 'dot', to: RouteLinks.repaymentsPage},
        {name: 'Loan Charges', status:1, icon: 'dot', to: RouteLinks.loanChargesPage},
        {name: 'Configurations', status:1, icon: 'arrow-right', subLinks: [
            {name: 'Loan Offers', status:1, icon: 'dot', to: RouteLinks.loanOffersPage },
            ]
        },
        ],
    },
    // {name:'Product 2', title:'Product 2', status:1, icon: 'product', subLinks: [
    //     {name: 'Applications', 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},
    //     ]
    // },
]