import { NotificationItem, RemoveNotification } from 'context/notifications';
import { useTimeOut } from 'hooks/useTimeOut';

interface ToastProps extends NotificationItem {
  dismiss: RemoveNotification;
}

export const Toast = ({
  id,
  type,
  title,
  message,
  dismiss,
  dismissAfter,
}: ToastProps) => {
  const timeout = useTimeOut(() => {
    if (dismissAfter) {
      dismiss(id);
    }
  }, dismissAfter);

  const handleMouseEnter: React.MouseEventHandler = (ev) => {
    timeout.pause();
  };
  const handleMouseLeave: React.MouseEventHandler = (ev) => {
    timeout.resume();
  };

  const cn = [
    'toast flex alignCenter justifyBetween paddingX5 paddingY4 bg-blur pill',
    type,
  ].join(' ');

  return (
    <div
      className={cn}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <div className="flexGrow">
        {title && <div className="fz14 bold">{title}</div>}
        <div className="fz14 truncate" title={message}>
          {message}
        </div>
      </div>
      <div className="flexNone cup marginX2 fz14" onClick={() => dismiss(id)}>
        ✕
      </div>
    </div>
  );
};