import { FC, ReactNode } from 'react';
import { RouteScreen } from '../types/RouteScreen';

export type LayoutScreen = FC<{ children: ReactNode }>;

/**
 * 특정 path에 매핑된 레이아웃부터 상위 레이아웃까지 탐색하여,
 * 가장 "안쪽 → 바깥" 순서의 배열을 만든 후,
 * reduce로 쌓아올려 최종 래퍼 컴포넌트를 반환합니다.
 *
 * 예) map:
 *   './item/detail' => { component: ItemLayout, path: './item/_layout' }
 *   './item/_layout' => { component: RootLayout, path: './_layout' }
 *
 * => layoutChain = [ItemLayout, RootLayout]
 * => 최종 렌더링 결과: <RootLayout><ItemLayout>children</ItemLayout></RootLayout>
 */
export function mergeParentLayoutScreen(screens: Map<string, RouteScreen>, path: string): LayoutScreen {
  // 최종 래퍼 컴포넌트
  let MergedLayout: FC<{ children?: ReactNode }> = ({ children }) => <>{children}</>;

  let currentPath: string | undefined = path;
  while (currentPath) {
    const routeScreen = screens.get(currentPath);
    if (!routeScreen) {
      break;
    }

    // 바로 상위 래퍼로 감싸기
    const LayoutScreen = routeScreen.component as LayoutScreen;
    const ChildLayout = MergedLayout;
    MergedLayout = ({ children }) => (
      <LayoutScreen>
        <ChildLayout>{children}</ChildLayout>
      </LayoutScreen>
    );

    // 상위 경로로 이동
    currentPath = routeScreen.path;
  }

  return MergedLayout;
}