import React, { useCallback, useState } from "react";

import LoadingComponent from "@src/components/UI/Loader";
import Activify from "@src/decorators/Activify";
import styles from "./Loader.scss";

const Loading = Activify()(
  ({ active, zIndex = 1000000000, customStyles = {} }) => {
    const activeClassName = active ? styles.active : "";
    return (
      <div
        style={{ zIndex, ...customStyles }}
        className={`${styles.loaderWrapper} ${activeClassName}`}
      >
        <LoadingComponent />
      </div>
    );
  },
);

const Loader = ({ customStyles, zIndex }) => WrappedComponent => {
  return props => {
    const [active, setActive] = useState(false);

    const activateLoader = useCallback(() => {
      setActive(true);
    }, []);

    const deactivateLoader = useCallback(e => {
      if (e) {
        e.preventDefault && e.preventDefault();
        e.stopPropagation && e.stopPropagation();
      }
      setActive(false);
    }, []);

    // TODO: Inconsitent terminology, We are not actually wrapping a component.
    return (
      <>
        <WrappedComponent
          // eslint-disable-next-line react/jsx-props-no-spreading
          {...props}
          loaderActive={active}
          activateLoader={activateLoader}
          deactivateLoader={deactivateLoader}
        />
        <Loading active={active} zIndex={zIndex} customStyles={customStyles} />
      </>
    );
  };
};

export default Loader;
