import React, { useGlobal } from "reactn";
import { ActivityIndicator, View } from "react-native";

import { Palette } from "../styles";
import useLayoutType from "../hooks/useLayoutType";

export default ({ children }) => {
  const [isGlobalLoading] = useGlobal("_isLoading");

  const { isDesktopWeb = false, isMobileWeb = false } = useLayoutType();

  return (
    <>
      {children}

      {isGlobalLoading && (
        <View
          style={[
            {
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              zIndex: 9999,
              backgroundColor: Palette.transparentBlack,
            },
            isDesktopWeb
              ? { position: "fixed" }
              : isMobileWeb
              ? { position: "fixed" }
              : { position: "absolute" },
          ]}
        >
          <LoaderIndicator />
        </View>
      )}
    </>
  );
};

export const LoaderIndicator = () => {
  return <ActivityIndicator size={"large"} color={Palette.primary} />;
};
