import { Toast, ToastProps } from "@komi-app/creator-ui";
import { Dispatch, SetStateAction } from "react";
import styles from "./ToastContainer.module.scss";

export interface ToastContainerProps extends ToastProps {
  setProps: Dispatch<SetStateAction<ToastProps | null>>;
  duration?: number;
}

export const ToastContainer: React.FC<ToastContainerProps> = ({
  text,
  semantic,
  showIcon = false,
  dismissible = false,
  duration,
  setProps,
}) => {
  /** If duration is passed, autohide functionality is enabled  */
  if (duration) {
    setTimeout(() => {
      setProps(null);
    }, duration);
  }

  /** Reset toast on close */
  const onCloseClick = () => {
    setProps(null);
  };
  return (
    <div className={styles.toastContainer}>
      <Toast
        text={text}
        semantic={semantic}
        showIcon={showIcon}
        dismissible={dismissible}
        onDismiss={onCloseClick}
      />
    </div>
  );
};
