import { createContext, useContext, useState, ReactNode, useCallback } from 'react';
import { useEffect } from 'react';

interface ModalContextType {
  isOpen: boolean;
  modalType: string;
  modalData: any;
  openModal: (modalType: string, modalData?: any) => void;
  closeModal: () => void;
  closeLoader: () => void;
}

const ModalContext = createContext<ModalContextType>({
  isOpen: false,
  modalType: '',
  modalData: null,
  openModal: () => {},
  closeModal: () => {},
  closeLoader: () => {},
});

export const useModalContext = () => useContext(ModalContext);

export function ModalProvider({ children }: { children: ReactNode }) {
  const [isOpen, setOpen] = useState(false);
  const [modalType, setType] = useState('');
  const [modalData, setData] = useState(null);

  const openModal = (type: string, data?: any) => {
    setOpen(true);
    setType(type);
    setData(data);
  };

  const closeModal = useCallback(() => {
    setOpen(false);
    setType('');
    setData(null);

    window.location.reload()
  }, []);

  const closeLoader = useCallback(() => {
    setOpen(false);
    setType('');
    setData(null);
  }, []);

  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    }
    else {
      document.body.style.overflow = 'auto';
    }
  }, [isOpen])

  return (
    <ModalContext.Provider value={{ isOpen, modalType, modalData, openModal, closeModal, closeLoader }}>
      {children}
    </ModalContext.Provider>
  );
}