import * as React from "react";
import { pathOr } from "ramda";

import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";

import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
import { StackNavigator } from "../../Navigator";

type Components = {
  NavBar: React.ComponentType<any>;
  Background: React.ComponentType<any>;
};

type Props = {
  Components: Components;
};

const Layout = ({ Components }: Props) => {
  const { appState } = usePickFromState(["appState"]);
  const appReady = pathOr(false, ["appReady"], appState);

  if (!appReady) {
    return null;
  }

  return (
    <ScreenLayoutContextProvider>
      <Components.Background>
        <StackNavigator Components={Components} />
      </Components.Background>
    </ScreenLayoutContextProvider>
  );
};

export default Layout;