import React, { useState } from "react";
import PropTypes from "prop-types";
import { useDispatch } from "react-redux";

import { Toast } from "react-bootstrap";

import { removeNotification } from "../../actions/notifications";

export const Notification = ({
  id,
  icon,
  title,
  message,
  imageUrl,
  autohide,
  delay,
}) => {
  const dispatch = useDispatch();
  const [show, setShow] = useState(true);

  const hide = () => {
    setShow(false);
    setTimeout(() => dispatch(removeNotification(id)), 200);
  };

  return (
    <Toast show={show} onClose={hide} autohide={autohide} delay={delay}>
      <Toast.Header>
        {icon !== "" && <i className={`fa fa-${icon} mr-2`} />}
        <strong className="mr-auto">{title}</strong>
      </Toast.Header>
      <Toast.Body>
        {message !== "" && <span>{message}</span>}
        {imageUrl !== "" && (
          <img src={imageUrl} className="img-fluid mt-2 mr-auto" />
        )}
      </Toast.Body>
    </Toast>
  );
};
Notification.propTypes = {
  id: PropTypes.string,
  icon: PropTypes.string,
  title: PropTypes.string,
  message: PropTypes.string,
  imageUrl: PropTypes.string,
  autohide: PropTypes.bool,
  delay: PropTypes.number,
};

Notification.defaultProps = {
  autohide: false,
  delay: 5000,
  icon: "",
  imageUrl: "",
  title: "Info",
  message: "",
};