import * as React from 'react';
import { useQuery } from '@apollo/client';
import { GET_MENU_ADDITIONAL_CONTENT_SIDE, GET_MENU_CONTENT } from './query';
import { ListData } from '@assets/js-menu/ListData';
import { useContext } from 'react';
import { MenuConfig } from '@assets/js-menu/ConfigComponent';
import { AdditionalContent } from '@assets/js-menu/AdditionalContent';
import { getConfigData } from '@assets/js-menu/hooks/getConfig';

export interface IListRootProps {
   closeMenu?(): void;
}

export function ListRoot(props: IListRootProps) {
    const context = useContext(MenuConfig);
   const { loading: loadingMenuContent, error: errorMenuContent, data: menuContent } = useQuery(GET_MENU_CONTENT, { context: {getMethod: true} });

   const isAdditionalContentSideEnabled = getConfigData().config?.itemAdditionalContentSide && context.menuId;

   return (
      <>
         <div className="sections-responsive">
            {!context.isRootLoading && !loadingMenuContent && <div>
               <div dangerouslySetInnerHTML={{ __html: menuContent.header }}/>
            </div>}
            <ListData/>
            {!context.isLoading && !loadingMenuContent && <div>
               <div dangerouslySetInnerHTML={{ __html: menuContent.footer }}/>
            </div>}
         </div>
         {isAdditionalContentSideEnabled && <AdditionalContent query={GET_MENU_ADDITIONAL_CONTENT_SIDE} variables={{ id: context.menuId }} />}
      </>
   );
}
