"use client";
import React, { createContext, useState } from "react";
import { CircularProgress } from "@mui/material";

const UploadContext = createContext<
  | {
      isUploading: boolean;
      setIsUploading: React.Dispatch<React.SetStateAction<boolean>>;
    }
  | undefined
>(undefined);

export const UploadProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const [isUploading, setIsUploading] = useState(false);

  return (
    <UploadContext.Provider value={{ isUploading, setIsUploading }}>
      {children}
      {isUploading && (
        <div
          style={{
            position: "fixed",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            backgroundColor: "rgba(0, 0, 0, 0.5)",
            zIndex: 9999,
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              width: 75,
              height: 75,
              borderRadius: "50%",
              backgroundColor: "white",
            }}
          >
            <CircularProgress />
          </div>
        </div>
      )}
    </UploadContext.Provider>
  );
};

export default UploadContext;
