// components/layout/BackstoryRoutes.tsx
import React, { Ref, ReactNode } from "react";
import { Route } from "react-router-dom";

import { BackstoryPageProps } from '../BackstoryTab';
import { ConversationHandle } from '../Conversation';
import { User } from 'types/types';
import { getAllRoutes } from 'config/navigationConfig';
import { NavigationItem } from 'types/navigation';
import { useAppState } from "hooks/GlobalContext";

interface BackstoryDynamicRoutesProps extends BackstoryPageProps {
  chatRef: Ref<ConversationHandle>;
  user?: User | null;
}

const getBackstoryDynamicRoutes = (props: BackstoryDynamicRoutesProps): ReactNode => {
  const { user, chatRef } = props;
  const userType = user?.userType || null;
  const isAdmin = user?.isAdmin ? true : false;

  // Get all routes from navigation config
  const routes = getAllRoutes(userType, isAdmin);

  return routes.map((route: NavigationItem, index: number) => {
    if (!route.path || !route.component) return null;

    // Clone the component and pass necessary props
    const componentWithProps = React.cloneElement(route.component as React.ReactElement, {
      // Special handling for chat component ref
      ...(route.id === 'chat' && { ref: chatRef }),
      // Preserve any existing props
      ...(route.component.props || {}),
    });

    return (
      <Route
        key={`${route.id}-${index}`}
        path={route.path}
        element={componentWithProps}
      />
    );
  }).filter(Boolean);
};

export { getBackstoryDynamicRoutes };