import type { ReactElement } from 'react';
import { createContext, useContext, useMemo, useState } from 'react';
import { createPortal } from 'react-dom';

export const ColumnsContext = createContext<{
  tabsBarElement: HTMLElement | null;
  setTabsBarElement: (element: HTMLElement) => void;
  multiColumn: boolean;
}>({
  tabsBarElement: null,
  multiColumn: false,
  setTabsBarElement: () => undefined, // no-op
});

export function useColumnsContext() {
  return useContext(ColumnsContext);
}

export const ButtonInTabsBar: React.FC<{
  children: ReactElement | string | undefined;
}> = ({ children }) => {
  const { multiColumn, tabsBarElement } = useColumnsContext();

  if (multiColumn) {
    return children;
  } else if (!tabsBarElement) {
    return children;
  } else {
    return createPortal(children, tabsBarElement);
  }
};

type ContextValue = React.ContextType<typeof ColumnsContext>;

export const ColumnsContextProvider: React.FC<
  React.PropsWithChildren<{ multiColumn: boolean }>
> = ({ multiColumn, children }) => {
  const [tabsBarElement, setTabsBarElement] =
    useState<ContextValue['tabsBarElement']>(null);

  const contextValue = useMemo<ContextValue>(
    () => ({ multiColumn, tabsBarElement, setTabsBarElement }),
    [multiColumn, tabsBarElement],
  );

  return (
    <ColumnsContext.Provider value={contextValue}>
      {children}
    </ColumnsContext.Provider>
  );
};