import * as React from "react";
import { createContext, useContext } from "react";
import { SiteRoot } from "./site";
import { View } from "react-native";

import { ThemeProvider as StyledThemeProvider } from "styled-components";
import { GatewayDest, GatewayProvider } from "react-gateway";
import * as defaultTheme from "../theme";
import { ThemeProvider } from "./theme-provider";
import { ContentProvider } from "./content-provider";
import { ApiProvider } from "./api-provider";
import { AuthProvider } from "./auth-provider";
import { ProfileProvider } from "./profile-provider";
import { SelectChannelProvider } from "./select-channnel-provider";
import { setConfig } from "../config";

const ConfigContext = createContext<any>({});
export const useConfig = () => useContext(ConfigContext);
export default function MaestroMobileSdkProvider({
  children,
  siteId,
}: {
  children: any;
  siteId: string;
}) {
  setConfig({ SITE_ID: siteId });
  return (
    <ConfigContext.Provider value={{ SITE_ID: siteId }}>
      <GatewayProvider>
        <SiteRoot appId={siteId}>
          <ThemeProvider>
            <StyledThemeProvider theme={defaultTheme}>
              <ContentProvider>
                <ApiProvider>
                  <AuthProvider>
                    <ProfileProvider>
                      <SelectChannelProvider>{children}</SelectChannelProvider>
                    </ProfileProvider>
                  </AuthProvider>
                </ApiProvider>
              </ContentProvider>
            </StyledThemeProvider>
          </ThemeProvider>
        </SiteRoot>
        <GatewayDest
          name="global"
          component={({ children }) =>
            children ? (
              <View
                style={{
                  width: "100%",
                  height: "100%",
                  position: "absolute",
                }}
              >
                {children}
              </View>
            ) : null
          }
        />
      </GatewayProvider>
    </ConfigContext.Provider>
  );
}