import * as React from "react";
import { View, StyleSheet } from "react-native";
import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
import { isVizioPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
import { Spinner } from "@applicaster/zapp-react-native-ui-components/Components/Spinner";
import { useTheme } from "@applicaster/zapp-react-native-utils/theme";

import { useLoadingOverlayVisibility } from "./useLoadingOverlayVisibility";

export { loadingOverlayManager } from "./LoadingOverlayManager";

const styles = StyleSheet.create({
  container: {
    opacity: 0.5,
    alignItems: "center",
    justifyContent: "center",
    zIndex: 100,
    flex: 1,
  },
});

const LoadingOverlayComponent = () => {
  const visible = useLoadingOverlayVisibility();
  const theme = useTheme();

  const backgroundColor = React.useMemo(() => {
    return theme?.app_background_color || "black";
  }, [theme?.app_background_color]);

  React.useEffect(() => {
    if (visible) {
      focusManager.disableFocus();
    } else {
      focusManager.enableFocus();
    }
  }, [visible]);

  return visible ? (
    <View
      style={[StyleSheet.absoluteFill, styles.container, { backgroundColor }]}
    >
      <Spinner />
    </View>
  ) : null;
};

export const LoadingOverlay = isVizioPlatform()
  ? LoadingOverlayComponent
  : () => null;