import React from "react";
import { useParams } from "react-router-dom";

import ComponentLoader from "../containers/ComponentLoader";

import { usePage } from "./Page";
import { TabPanel } from "./TabPanel";

export interface TabPanelsProps {
  contribParams?: Record<string | number | symbol, unknown>;
}

export const TabPanels: React.FC<React.PropsWithChildren<TabPanelsProps>> = ({
  contribParams,
  children,
}) => {
  const params = useParams();
  const page = usePage();

  contribParams = { ...params, ...contribParams };

  return (
    <>
      {children}
      {page.contrib
        .filter((operation) => operation.method === "GET" && operation.component?.variant == "tab")
        .map((operation) => {
          const value = operation.id.match(/\w+\.contrib:(?<name>.+)/)?.groups?.name;

          return (
            value && (
              <TabPanel key={operation.id} value={value}>
                <ComponentLoader operation={operation} params={contribParams} />
              </TabPanel>
            )
          );
        })}
    </>
  );
};