import {
  SetStateAction,
  createContext,
  useEffect,
  useState,
  Dispatch,
} from "react";

interface MobileModalWrapperContext {
  setIsAnimate: Dispatch<SetStateAction<boolean>> | null;
  isAnimate: boolean | null;
}

export const MobileModalWrapperContext =
  createContext<MobileModalWrapperContext>({
    setIsAnimate: null,
    isAnimate: null,
  });

interface MobileModalWrapperProps {
  children: React.ReactNode;
}

const MobileModalWrapper = ({ children }: MobileModalWrapperProps) => {
  const [isAnimate, setIsAnimate] = useState(false);

  useEffect(() => {
    setIsAnimate(true);
  }, []);

  return (
    <div
      className={`h-screen w-screen pt-20 absolute z-[99999999] top-0 transition-all duration-300 ease-in-out ${
        isAnimate ? "backdrop-blur-sm bg-[#0D192266]" : "backdrop-blur-none"
      }`}
    >
      <div
        className="h-full w-full transition-transform duration-300 ease-in-out"
        style={{ transform: `translateY(${isAnimate ? 0 : 100}%)` }}
      >
        <MobileModalWrapperContext.Provider
          value={{ isAnimate: isAnimate, setIsAnimate: setIsAnimate }}
        >
          {children}
        </MobileModalWrapperContext.Provider>
      </div>
    </div>
  );
};

export { MobileModalWrapper };