import * as React from 'react';
import { useState } from 'react';
import { Menu } from './Menu';
import { IConfig, IMenuState } from '@assets/js-menu/Interfaces';

export const MenuConfig = React.createContext<IMenuState>({} as IMenuState);

export function ConfigComponent() {
   const config: IConfig = {
      data: window.wpj.mobilemenu || null
   };
   const configVal = config.data?.config;

   const [menuId, updateMenuId] = useState(configVal?.activeSection || null);
   const [isRootLoading, setRootLoading] = useState(true);
   const [isLoading, setLoading] = useState(true);

   // rootMenuId is not used in engine, but can be used in many shops to hold active id of opened root section (e.g. rockpoint)
   const [rootMenuId, updateRootMenuId] =
      useState(configVal?.rootSectionsId?.includes(configVal?.activeSectionParents?.[0]) ? configVal?.activeSectionParents?.[0] : 0);

   const context: IMenuState = {
      config: config,
      menuId,
      updateMenuId,
      rootMenuId,
      updateRootMenuId,
      setRootLoading,
      isRootLoading,
      setLoading,
      isLoading
   }

   return (
      <MenuConfig.Provider value={context}>
         <Menu/>
      </MenuConfig.Provider>);
}
