import {createContext, FC, ReactNode, useContext} from "react";
import { notification } from "antd";

/**
 * Create our NotificationContext to store the `api` object
 * returned by notification.useNotification().
 */
const NotificationContext = createContext(null);

/**
 * A custom hook to make usage easier in child components.
 */
// eslint-disable-next-line react-refresh/only-export-components, @typescript-eslint/explicit-function-return-type
export const useNotification = () => {
  return useContext(NotificationContext);
};

/**
 * The Provider itself:
 *  - Call notification.useNotification() to get [api, contextHolder].
 *  - Render contextHolder somewhere high-level in your app (so the notifications mount properly).
 *  - Provide `api` via the NotificationContext.
 */
interface NotificationProviderProps {
  children?: ReactNode | ReactNode[];
}

export const NotificationProvider: FC<NotificationProviderProps> = ({
  // eslint-disable-next-line react/prop-types
  children, //TODO: Unable to resolve this. Adding an eslint disable.
}) => {
  const [api, contextHolder] = notification.useNotification({
    placement: "bottomRight",
    bottom: 70,
    showProgress: true,
  });

  return (
      // @ts-ignore
    <NotificationContext.Provider value={api}>
      {/* contextHolder must be rendered in the DOM so notifications can appear */}
      {contextHolder}
      {children}
    </NotificationContext.Provider>
  );
};
