import * as React from "react";
import { createContext, useContext, ReactNode } from "react";

import { SiteSettings } from "./site";
import { Text, ActivityIndicator } from "react-native";
import { useFirebase } from "../../hooks/use-firebase/useFirebase";
import LaunchScreen from "../../components/launch-screen";
import * as img from "../../assets/images/welcome-screen.png";
const SiteContext = createContext<SiteSettings>({} as SiteSettings);

export const SiteProvider = SiteContext.Provider;

export const useSiteSettings = () => useContext(SiteContext);

export const SiteRoot = ({
  children,
  appId,
}: {
  appId: string;
  children: ReactNode;
}) => {
  const { loading, data } = useFirebase<SiteSettings>(`/sites/${appId}`);

  return (
    <SiteProvider value={data || ({} as SiteSettings)}>
      {loading ? <LaunchScreen show={true} source={img} /> : children}
    </SiteProvider>
  );
};

export * from "./site";