import * as React from "react";
import { createPortal } from "react-dom";

import { BackgroundImage } from "@applicaster/zapp-react-native-ui-components/Components/BackgroundImage";

import { ConfirmDialog } from "@applicaster/zapp-react-dom-ui-components/Components/ConfirmDialog";
import { NavWrapper } from "@applicaster/zapp-react-dom-ui-components/Components/NavWrapper";
import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";

import LayoutComponent from "@applicaster/zapp-react-native-ui-components/Components/Layout";

type Props = {
  children: React.ReactNode;
};

export function Layout({ children }: Props) {
  const { activeRiver } = useNavigation();

  const ComponentsExtraProps = React.useMemo(
    () => ({
      NavBar: { activeRiver },
    }),
    [activeRiver]
  );

  return (
    <>
      <LayoutComponent
        Components={{ Background: BackgroundImage, NavBar: NavWrapper }}
        ComponentsExtraProps={ComponentsExtraProps}
      >
        {children}
      </LayoutComponent>
      {createPortal(<ConfirmDialog />, document.body)}
    </>
  );
}