import { useEffect, useState } from 'react'
import { Outlet } from 'react-router-dom'

import DashboardHeader from './DashboardHeader'
import { generalLayoutContext } from '../../context/GeneralLayoutContext'
import DashboardAside from './aside/DashboardAside'
import RightAsideBar from './rightaside/RightAsideBar'

export default function DashboardLayout() {

  const {showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
  
  return (
    <div className='w-full flex gap-10 relative m-auto h-screen overflow-x-hidden overflow-y-auto bg-white-body dark:bg-black-body p-8 pt-0 lg:p-10'>
        <div className='hidden lg:block min-w-[300px] px-8 py-4 rounded-3xl sticky top-0 h-full bg-white-aside dark:bg-black-aside shadow-round_black dark:shadow-round_white'>
            <DashboardAside />
        </div>

        {/* <div className={`${showAsideDrawer =='aside' ? 'left-0' : '-left-full'} w-4/5 sm:w-72 px-8 py-4 lg:hidden fixed inset-0 z-[999] bg-white-aside dark:bg-black-aside dark:text-white-light`}>
            <DashboardAside />
        </div> */}
        <div className={`${showAsideDrawer =='aside' ? 'left-0' : '-left-full'} lg:hidden w-full fixed inset-0 z-[999]`}>
            <div className={`${showAsideDrawer =='aside' ? 'fixed left-0 top-0 inset-0' : '-left-full'} w-full bg-white/20 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div>
            <div className={`fixed px-8 py-4 h-full w-4/5 sm:w-72 bg-white-aside dark:bg-black-aside dark:text-white-light`}>
                <DashboardAside />
            </div>
        </div>

        <div className='main w-full bg-inherit large:mr-[350px]'>
            <div className='fixed top-0 left-0 z-[777] w-full px-8 bg-inherit lg:hidden'>
                <DashboardHeader />
            </div> 

            {/* main body section */}
            <div className='min-h-[calc(99vh-111px)] pt-20 lg:pt-0'>
                <Outlet />
            </div>

            {/* FOOTER SECTION */}
            <footer className="py-5 text-center lg:text-end w-full text-brown dark:text-white-light">
                <p className="text-10">Copyright @ {new Date().getFullYear()} - Developed by digiFi. All Rights Reserved</p>
            </footer>
        </div>

        {/* Right Aisde */}
        <div className={`px-8 py-4 hidden large:flex fixed right-5 top-0 bottom-0 sm:w-[350px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
            <RightAsideBar />
        </div>
        <div className={`${showAsideDrawer =='right-aside' ? 'right-0 w-full' : '-right-full w-0'} fixed inset-0 z-[999] large:hidden bg-white/20 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')}>
            {/* <div className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] right-0 top-0 inset-0 w-full bg-white/20 bg-red-400 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div> */}
            <div className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] top-0 botom-0 px-8 py-4 h-full w-4/5 sm:w-[350px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
                <RightAsideBar />
            </div>
        </div>
    </div>
  )
}