import React, {useContext, useEffect, useRef, useState} from 'react';
import {Outlet} from 'react-router-dom';
import {useMediaQuery} from 'react-responsive';
import './mainLayout.scss';
import './Sidebar/Sidebar/sidebar.scss';
import './Sidebar/Sidebar/sidebar-mobile.scss';
import './Header/header.scss';
import './Notification/notification.scss';
import Sidebar from './Sidebar/Sidebar/Sidebar';
import QuickAccess from './QuickAccess/QuickAccess';
import Footer from './Footer/Footer';
import Header from './Header/Header';
import {NotificationsContextProvider} from '../../context/notifications-context';
import MainContainerContext from '../../context/mainContainer-context';
import ActiveVisitsWidget from "../Widgets/ActiveVisitsWidget/ActiveVisitsWidget";
import {HeaderControlsContextProvider} from "../../context/headerControls-context";
import RenewCardWidget from "../Widgets/RenewCardWidget/RenewCardWidget";
import {BreadcrumbsContextProvider} from "../../context/breadcrumbs-context";
import ThemeToggler from "../UI/CustomToggler/ThemeToggler/ThemeToggler";
import helperIcon from "../../assets/images/helper-icon.svg";
import FloatingWidget from "../Widgets/FloatingWidget/FloatingWidget";
import dpass from "../../assets/images/DpassLogoSimple.svg";

const MainLayout: React.FC = () => {

    const isDesktop = useMediaQuery({query: '(min-width: 992px)'});
    const isSmallDesktop = useMediaQuery({query: '(min-width: 992px) and (max-width:1399px)'});
    const [quickAccessMenu, setQuickAccessMenu] = useState(localStorage.getItem('hasQuickAccessOpen') === 'true');
    const {containerRef} = useContext(MainContainerContext);
    const overlayRef = useRef<HTMLDivElement>(null);


    const setAndStoreQuickAccessMenu = (value:boolean) => {

        localStorage.setItem('hasQuickAccessOpen', value.toString())
        setQuickAccessMenu(value)

    }


    return (
        <NotificationsContextProvider>
            <HeaderControlsContextProvider>
                <BreadcrumbsContextProvider>
                    <div id="main-layout">


                    <Sidebar closeQuickAccess={()=>setAndStoreQuickAccessMenu(false)}/>


                    {isDesktop && <QuickAccess isOpen={quickAccessMenu}
                                               toggleHelper={() => setAndStoreQuickAccessMenu(!quickAccessMenu)}/>}

                        <div ref={containerRef} className={`main-content ${quickAccessMenu ? 'open' : 'closed'}`}>
                            <Header isQaOpen={quickAccessMenu}/>
                            <div id='inner-content-scrollbar' className="inner-content scrollbar">
                                <Outlet/>
                                <div className="fake-footer"></div>
                            </div>
                            <Footer noLogo={isDesktop}/>

                        </div>



                    {quickAccessMenu && isSmallDesktop &&
                        <div ref={overlayRef} className="overlay" onClick={()=>setAndStoreQuickAccessMenu(false)}></div>}
                </div>



                    {/*<FloatingWidget*/}
                    {/*    urgent*/}
                    {/*    title={'Ενεργές Επισκέψεις'}*/}
                    {/*    icon={dpass}*/}
                    {/*>*/}
                    {/*    <ActiveVisitsWidget/>*/}
                    {/*</FloatingWidget>*/}

                        <ActiveVisitsWidget/>



                    {/*<FloatingWidget*/}
                    {/*    urgent*/}
                    {/*    title={'Ανανέωση Κάρτας'}*/}
                    {/*    icon={helperIcon}*/}
                    {/*>*/}
                    {/*    <RenewCardWidget/>*/}
                    {/*</FloatingWidget>*/}

                </BreadcrumbsContextProvider>
            </HeaderControlsContextProvider>
        </NotificationsContextProvider>
    );
};

export default MainLayout;