/**
 * - title setting
 * - lazy loading (Suspence)
 * - ErrorBoundary
 */
export const RouteWrapper: FC<TExtendedRouteObject> = ({ element, title }) => {
  useEffect(() => {
    document.title = title;
  }, [title]);

  const pendingMessage = useMemo(() => `Page is loading - ${title}`, [title]);

  return (
    <Suspense fallback={<div>{pendingMessage}</div>}>
      <ErrorBoundary>
        {element}
      </ErrorBoundary>
    </Suspense>
  );
};


const config: IReactDomRoutesWrapperConfig<IIncomingRoute> = {
  routes: [
    {
      fieldToOmit1: 'fieldToOmit1',
      fieldToOmit2: 'fieldToOmit2',
      title: 'first',
      children: [
        {
          fieldToOmit1: 'fieldToOmit1',
          fieldToOmit2: 'fieldToOmit2',
          title: 'first-first',
          children: [
            {
              title: 'first-first-first',
              fieldToOmit1: 'fieldToOmit1',
              fieldToOmit2: 'fieldToOmit2',
            }
          ],
        }
      ],
    },
    {
      fieldToOmit1: 'fieldToOmit1',
      fieldToOmit2: 'fieldToOmit2',
      title: 'second',
      children: [
        {
          fieldToOmit1: 'fieldToOmit1',
          fieldToOmit2: 'fieldToOmit2',
          title: 'second-first',
          children: [
            {
              title: 'second-first-first',
              fieldToOmit1: 'fieldToOmit1',
              fieldToOmit2: 'fieldToOmit2',
            }
          ],
        }
      ],
    },
  ],
  fieldsToOmit: [
    'fieldToOmit1',
    'fieldToOmit2',
  ],
  wrapRoute: (props) => <RouteWrapper element={<div>test<div/>} title={props.route.title} />,
};

const routes = wrapRoutes<IIncomingRoute, OutcomingRoute>(config);