import { useDispatch, useSelector } from "react-redux";

import type { RootState } from "../store";
import type { IModalStore } from "./modal.slice";
import { modalActions } from "./modal.slice";

export const useModalStore = () => {
  const modalState = useSelector<RootState, IModalStore>(
    (state) => state.modal,
  );
  const dispatch = useDispatch();

  const openModal = (modalKey: string, onClose?: () => void) => {
    dispatch(modalActions.openModal({ modalKey, onClose }));
    window.history.pushState({ modalHash: modalKey }, "", modalKey);
  };

  const closeModal = (modalKey: string) => {
    dispatch(modalActions.closeModal(modalKey));
  };

  const closeLastModal = () => {
    const [prevModalKey, lastModalKey] = modalState.list
      .slice(-2)
      .map((item) => item.modalKey);

    const closeModalKey = lastModalKey || prevModalKey;

    if (closeModalKey) {
      dispatch(modalActions.closeModal(closeModalKey));
      if (prevModalKey === closeModalKey) {
        // remove hash from the url
        window.history.pushState(
          "",
          "",
          `${window.location.pathname}${window.location.search}`,
        );
      }
    } else {
      window.history.back();
      // eslint-disable-next-line no-console
      console.warn("There is no modal to close");
    }
  };

  return {
    modalState,
    openModal,
    closeModal,
    closeLastModal,
  };
};