"use client";

import React, {
  createContext,
  ReactNode,
  useCallback,
  useContext,
  useState,
} from "react";

import { FullScreenBlurModal } from "@/components/ui";

interface FullScreenModalContextType {
  openModal: (content: React.ReactNode) => void;
  closeModal: () => void;
  isOpen: boolean;
}

const FullScreenModalContext = createContext<
  FullScreenModalContextType | undefined
>(undefined);

export const useFullScreenModal = () => {
  const context = useContext(FullScreenModalContext);
  if (!context) {
    throw new Error(
      "useFullScreenModal must be used within FullScreenModalProvider"
    );
  }
  return context;
};

interface FullScreenModalProviderProps {
  children: ReactNode;
}

export const FullScreenModalProvider = ({
  children,
}: FullScreenModalProviderProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const [content, setContent] = useState<React.ReactNode>(null);

  const openModal = useCallback((modalContent: React.ReactNode) => {
    setContent(modalContent);
    setIsOpen(true);
  }, []);

  const closeModal = useCallback(() => {
    setIsOpen(false);
  }, []);

  return (
    <FullScreenModalContext.Provider value={{ openModal, closeModal, isOpen }}>
      {children}
      <FullScreenBlurModal isOpen={isOpen}>{content}</FullScreenBlurModal>
    </FullScreenModalContext.Provider>
  );
};