import { createContext, useContext, useState } from "react";
import { View } from "react-native";

export interface IoverlayContext {
	showOverlay(): void;
	hideOverlay(): void;
}

export const OverlayContext = createContext<IoverlayContext>({
	showOverlay: () => {},
	hideOverlay: () => {},
});

export const OverlayProvider = ({ children }: { children: React.ReactNode }) => {
	const [overlayVisible, setOverlayVisible] = useState(false);

	const showOverlay = () => {
		setOverlayVisible(true);
	};

	const hideOverlay = () => {
		setOverlayVisible(false);
	};

	return (
		<OverlayContext.Provider
			value={{
				showOverlay,
				hideOverlay,
			}}
		>
			{children}
			{/* <OverlayComponent /> */}
			{overlayVisible && <OverlayComponent />}
		</OverlayContext.Provider>
	);
};

export const useOverlayContext = () => {
	return useContext(OverlayContext);
};

const OverlayComponent = () => {
	return (
		<View
			style={{
				flex: 1,
				width: "100%",
				height: "100%",
				justifyContent: "center",
				alignItems: "center",
				zIndex: 10,
				backgroundColor: "black",
				opacity: 0.5,
				position: "absolute",
			}}
		/>
	);
};