import { Modal1 } from './Modal1';
import { Modal2 } from './Modal2';
import { Modal3 } from './Modal3';
import {
  useState,
  createContext,
  useCallback,
  useContext,
  useMemo,
} from 'react';

export const ModalsIndexContext = createContext({
  index: 0,
  setIndex: () => undefined,
});

export const ModalsIndexContextProvider = ({ children }) => {
  const [index, setIndex] = useState(0);

  return (
    <ModalsIndexContext.Provider value={{ index, setIndex }}>
      {children}
    </ModalsIndexContext.Provider>
  );
};

export const useModals = () => {
  const { index, setIndex } = useContext(ModalsIndexContext);

  const queue = useMemo(() => [Modal1, Modal2, Modal3], []);

  const jumpToNextModal = useCallback(() => {
    setIndex((prev) => {
      const nextIndex = prev + 1;
      return nextIndex;
    });
  }, [setIndex]);

  const CurrentModal = useMemo(() => {
    const queueLength = queue.length - 1;

    if (index > queueLength) return null;

    const Component = queue[index];
    return Component;
  }, [queue, index]);

  if (CurrentModal === null) return null;

  return <CurrentModal jumpToNextModal={jumpToNextModal} />;
};