import {
  Toast,
  ToastBody,
  ToastTitle,
  Toaster,
  useId,
  useToastController,
} from "@fluentui/react-components";
import React, { PropsWithChildren } from "react";

type ToastContext = (
  title: string,
  body: string,
  intent?: "error" | "info" | "success" | "warning"
) => void;

const ToastContextK = React.createContext<ToastContext | null>(null);

export function ToastProvider(p: PropsWithChildren): React.ReactElement {
  const toasterId = useId("toaster");
  const { dispatchToast } = useToastController(toasterId);

  const hook: ToastContext = (title, body, intent) => {
    dispatchToast(
      <Toast>
        <ToastTitle>{title}</ToastTitle>
        <ToastBody>{body}</ToastBody>
      </Toast>,
      { intent: intent ?? "info" }
    );
  };

  return (
    <>
      <ToastContextK.Provider value={hook}>{p.children}</ToastContextK.Provider>

      <Toaster toasterId={toasterId} />
    </>
  );
}

export function useToast(): ToastContext {
  return React.useContext(ToastContextK)!;
}