import React from 'react';

import RevisionRenderer from '~/components/Page/RevisionRenderer';
import { useSWRxPageByPath } from '~/stores/page';
import { useCustomSidebarOptions } from '~/stores/renderer';
import loggerFactory from '~/utils/logger';

import { SidebarNotFound } from './CustomSidebarNotFound';

import styles from './CustomSidebarSubstance.module.scss';


const logger = loggerFactory('growi:components:CustomSidebarSubstance');


export const CustomSidebarSubstance = (): JSX.Element => {
  const { data: rendererOptions } = useCustomSidebarOptions({ suspense: true });
  const { data: page } = useSWRxPageByPath('/Sidebar', { suspense: true });

  if (rendererOptions == null) return <></>;

  const markdown = page?.revision?.body;

  return (
    <div className={`py-3 grw-custom-sidebar-content ${styles['grw-custom-sidebar-content']}`}>
      { markdown == null
        ? <SidebarNotFound />
        : (
          <RevisionRenderer
            rendererOptions={rendererOptions}
            markdown={markdown}
          />
        )
      }
    </div>
  );
};
