import React, { ComponentType, ReactNode } from "react";

type Provider = ComponentType<{ children: ReactNode }>;

export const buildProvidersTree = (providers: Provider[]): Provider => {
  if (!providers || providers.length === 0) {
    throw new Error("ContextProviderが不足しています");
  }

  // 基本ケース：ContextProviderが1つしか残っていない場合、それを返して終了する
  if (providers.length === 1) {
    return providers[0];
  }

  // 配列から最初の2つのContextProviderを取り出す
  const [FirstProvider, SecondProvider, ...restProviders] = providers;

  // 最初の2つのContextProviderをネストした新しいContextProviderを作成し、再帰する
  const CombinedProvider: Provider = ({ children }) => (
    <FirstProvider>
      <SecondProvider>{children}</SecondProvider>
    </FirstProvider>
  );

  return buildProvidersTree([CombinedProvider, ...restProviders]);
};