import ErrorModal from "@components/modals/ErrorModal";
import LoadingModal from "@components/modals/LoadingModal";
import { createContext, useContext, useState } from "react";
import { View } from "react-native";

export interface ImodalsManagerContext {
	showLoadingModal(): void;
	closeLoadingModal(): void;
	showErrorModal(): void;
	closeErrorModal(): void;
}

export const ModalsManagerContext = createContext<ImodalsManagerContext>({
	showLoadingModal: () => {},
	closeLoadingModal: () => {},
	showErrorModal: () => {},
	closeErrorModal: () => {},
});

export const ModalsManagerProvider = ({ children }: { children: React.ReactNode }) => {
	const [showBackdrop, setShowBackdrop] = useState(false);
	const [loadingModalVisible, setLoadingModalVisible] = useState(false);
	const [errorModalVisible, setErrorModalVisible] = useState(false);

	const showLoadingModal = () => {
		setShowBackdrop(true);
		setLoadingModalVisible(true);
	};

	const closeLoadingModal = () => {
		setShowBackdrop(false);
		setLoadingModalVisible(false);
	};

	const showErrorModal = () => {
		setShowBackdrop(true);
		setErrorModalVisible(true);
	};

	const closeErrorModal = () => {
		setShowBackdrop(false);
		setErrorModalVisible(false);
	};

	return (
		<ModalsManagerContext.Provider
			value={{
				showLoadingModal,
				closeLoadingModal,
				showErrorModal,
				closeErrorModal,
			}}
		>
			{children}
			{showBackdrop && <OverlayBackdrop />}

			{loadingModalVisible && <LoadingModal />}
			{errorModalVisible && <ErrorModal />}
		</ModalsManagerContext.Provider>
	);
};

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

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