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

import { getBackgroundImageUrl } from "../utils";
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 = {
  Background?: Record<string, any>;
  NavBar?: Record<string, any>;
};

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

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

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

  const backgroundColor = React.useMemo(() => theme.app_background_color, []);

  const backgroundImageUrl = React.useMemo(
    () => getBackgroundImageUrl(remoteConfigurations),
    [remoteConfigurations]
  );

  if (!appReady) {
    return null;
  }

  return (
    <LayoutContainer>
      <ScreenLayoutContextProvider>
        <Components.Background
          backgroundColor={backgroundColor}
          backgroundImageUrl={backgroundImageUrl}
          {...R.omit(["ref"])(ComponentsExtraProps?.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;