import React, { useCallback, useState } from 'react';
import { Outlet } from 'react-router-dom';
import { LuArrowRightToLine } from "react-icons/lu";
import SidebarDesktop from './components/SidebarDesktop';
import Navbar from './components/Navbar';
import SidebarMobile from './components/SidebarMobile';
import Drawer from '../Drawer';
import { useColor } from '../../context/CounterContext';

const SidebarLayouts = (props) => {
    const { user, children, sidebarOptions, navbarOptions, darkMode } = props;
    const { bgColor = "#012C6E", logoInfo } = sidebarOptions;
    const [sidebarMobileOpen, setSidebarMobileOpen] = useState(false);
    const [openDrawerModal, setOpenDrawerModal] = useState(false);
    const { enabled, sidebarOpen, closeSidebarHandler } = useColor();

    // open sidebar (mobile)
    const openSidebarMobileHandler = useCallback(() => {
        setSidebarMobileOpen(true);
    }, [sidebarMobileOpen]);

    // close sidebar (mobile)
    const closeSidebarMobileHandler = useCallback(() => {
        setSidebarMobileOpen(false);
    }, [sidebarMobileOpen]);

    // open drawer rightbar
    const openDrawerModalHandler = useCallback(() => {
        setOpenDrawerModal(true);
    }, [openDrawerModal]);

    // close drawer rightbar
    const closeDrawerModalHandler = useCallback(() => {
        setOpenDrawerModal(false);
    }, [openDrawerModal]);

    return (
        <div className='w-full text-white relative sidebar_layout'>
            {/* for desktop */}
            <SidebarDesktop
                darkMode={darkMode}
                sections={props.sections}
                sidebarOptions={sidebarOptions}
            />

            {/* for mobile */}
            {sidebarMobileOpen && (
                <SidebarMobile
                    darkMode={darkMode}
                    sections={props.sections}
                    sidebarOptions={sidebarOptions}
                    sidebarMobileOpen={sidebarMobileOpen}
                    openSidebarMobileHandler={openSidebarMobileHandler}
                    closeSidebarMobileHandler={closeSidebarMobileHandler}
                />
            )}


            <div className={`flex flex-col transition-all ${sidebarOpen ? 'pl-0 md:pl-3' : 'md:pl-80'}`}>
                {/* navbar  */}
                <Navbar
                    user={user}
                    darkMode={darkMode}
                    sidebarOptions={sidebarOptions}
                    navbarOptions={navbarOptions}
                    openSidebarMobileHandler={openSidebarMobileHandler}
                    openDrawerModalHandler={openDrawerModalHandler}
                />

                {/* icon display when sidebar is closed */}
                <div
                    className={`w-[26px] h-[26px] rounded-md cursor-pointer flex-col items-center justify-center absolute top-[12px] transition-all group ${sidebarOpen ? 'hidden md:flex' : 'hidden'} rotate-180 z-30 left-[6px]`}
                    style={{
                        boxShadow: "0px 0px 2px 1px #ffffff4D",
                        backgroundColor: enabled ? darkMode : (localStorage.getItem("sidebar_color") ? JSON.parse(localStorage.getItem("sidebar_color"))?.sidebarBgColor : bgColor),
                    }}
                    onClick={closeSidebarHandler}
                >
                    <LuArrowRightToLine className='group-hover:text-white -rotate-180' size={12} style={{ color: logoInfo?.chevronLeftColor || "white" }} />
                </div>

                {/* children */}
                <main className={`bg-white relative z-10 text-black sidebar_layout_content overflow-y-scroll`}
                    style={{ height: `calc(100vh - ${navbarOptions?.height || "0px"})` }}
                >
                    <div className=''>
                        {children}

                        <Outlet />
                    </div>
                </main>
            </div>

            {/* drawer modal */}
            {openDrawerModal && (
                <Drawer
                    closeModal={closeDrawerModalHandler}
                    IsOpen={openDrawerModal}
                />
            )}
        </div>
    )
}

export default SidebarLayouts;