import React, {
  useState,
  createContext,
} from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import {
  Layout,
  CenterLayout,
  LeftLayout,
  MainLayout,
  InnerCenterLayout,
} from './index.styled';
import AdminSideMenu from '../AdminSidebar';
import AdminNavbar from '../AdminNavbar';


/**
 * @param {object} props
 * @param {"cms" | "analytics" | "support"} props.type - switch side navigate routes type
 * @returns {JSX.Element}
 */
const AdminAppMainLayout = ({ type }) => {
  const [isOpen, setIsOpen] = useState(true);
  const location = useLocation();
  const [adminGeneralData, setAdminGeneralData] = useState({});
  const [sideMenuLayout, setSideMenuLayout] = useState(true);
  const [centerLayoutStyle, setCenterLayoutStyle] = useState({});
  const [accessToken, setAccessToken] = useState('');

  return (
    <OutletContext.Provider
      value={{
        adminGeneralData,
        setAdminGeneralData,
        setSideMenuLayout,
        centerLayoutStyle,
        setCenterLayoutStyle,
      }}
    >
      <Layout>
        <MainLayout>
          <LeftLayout>
            <AdminSideMenu type={type} />
          </LeftLayout>
          <CenterLayout>
            <AdminNavbar />
            <InnerCenterLayout isOpen={isOpen} style={centerLayoutStyle}>
              <Outlet />
            </InnerCenterLayout>
          </CenterLayout>
        </MainLayout>
      </Layout>
    </OutletContext.Provider>
  );
};

export const OutletContext = createContext({});
export default AdminAppMainLayout;
