import * as React from "react";
import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";

import { LayoutContainer } from "./LayoutContainer";
import { ScreenContainer } from "./ScreenContainer";

import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
import { PathnameContext } from "../../../Contexts/PathnameContext";
import { ScreenDataContext } from "../../../Contexts/ScreenDataContext";
import { ScreenContextProvider } from "../../../Contexts/ScreenContext";

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

type ComponentsExtraProps = {
  NavBar?: Record<string, any>;
};

type Props = {
  Components: Components;
  ComponentsExtraProps?: ComponentsExtraProps;
  children: React.ReactNode;
};

const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
  const navigator = useNavigation();

  const { appState: { appReady = false } = {} } = usePickFromState([
    "appState",
  ]);

  if (!appReady) {
    return null;
  }

  return (
    <LayoutContainer>
      <ScreenLayoutContextProvider>
        <Components.Background>
          <ScreenDataContext.Provider value={navigator.data}>
            <PathnameContext.Provider value={navigator.currentRoute}>
              <ScreenContextProvider pathname={navigator.currentRoute}>
                <ScreenContainer
                  ComponentsExtraProps={ComponentsExtraProps}
                  NavBar={Components.NavBar}
                >
                  {children}
                </ScreenContainer>
              </ScreenContextProvider>
            </PathnameContext.Provider>
          </ScreenDataContext.Provider>
        </Components.Background>
      </ScreenLayoutContextProvider>
    </LayoutContainer>
  );
};

export default Layout;