import * as React from "react";

import { Background } from "@applicaster/zapp-react-dom-ui-components/Components/Background";
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 { getLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";

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 { remoteConfigurations } = usePickFromState(["remoteConfigurations"]);

  const localizations = getLocalizations(remoteConfigurations);

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

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