import { showLoading, hideLoading } from "react-redux-loading-bar";
import  { type AnyAction, type Middleware } from "redux";

import  { type RootState } from "..";

interface Config {
  promiseTypeSuffixes?: string[],
}

const defaultTypeSuffixes: Config["promiseTypeSuffixes"] = [
  "PENDING",
  "FULFILLED",
  "REJECTED",
];

export const loadingBarMiddleware = (
  config: Config = {},
): Middleware<unknown, RootState> => {
  const promiseTypeSuffixes = config.promiseTypeSuffixes ?? defaultTypeSuffixes;

  return ({ dispatch }) =>
    (next) =>
      (action: AnyAction) => {
        if (action.type && !action.skipLoading) {
          const [PENDING, FULFILLED, REJECTED] = promiseTypeSuffixes;

          const isPending = new RegExp(`${PENDING}$`, "g");
          const isFulfilled = new RegExp(`${FULFILLED}$`, "g");
          const isRejected = new RegExp(`${REJECTED}$`, "g");

          if (typeof action.type === "string") {
            if (action.type.match(isPending)) {
              dispatch(showLoading());
            } else if (
              action.type.match(isFulfilled) ??
            action.type.match(isRejected)
            ) {
              dispatch(hideLoading());
            }
          }
        }

        return next(action);
      };
};