import React from "react";
import toast from "react-hot-toast";
import classNames from "classnames";
import { DEFAULT_SNACKBAR_POSITION } from "./constants";
import { Snackbar } from "./Snackbar";
import { SnackbarProvider } from "./SnackbarProvider";
import { ShowSnackbarProps } from "./types";

export const hideSnackbar = (id?: string) => toast.dismiss(id);

export const showSnackbar = ({
  component,
  message,
  duration = 5000,
  position = DEFAULT_SNACKBAR_POSITION,
  ...rest
}: ShowSnackbarProps) => {
  const options = {
    position,
    duration,
  };

  return toast.custom(
    (t) => (
      <SnackbarProvider
        {...{
          id: t.id,
          onClose: () => toast.dismiss(t.id),
          duration,
          position,
          className: classNames(
            t.visible ? "animate-toast-enter" : "animate-toast-leave",
          ),
          component: message ? (
            <Snackbar
              {...{
                message,
                ...rest,
              }}
            />
          ) : (
            component
          ),
        }}
      />
    ),
    options,
  );
};