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

import { Toast } from "react-bootstrap"

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

const NotificationConnected = ({
  id,
  icon,
  title,
  message,
  imageUrl,
  autohide,
  delay,
  removeNotification,
}) => {
  const [show, setShow] = useState(true)

  const hide = () => {
    setShow(false);
    setTimeout(() => 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>
  )
}
NotificationConnected.propTypes = {
  id: PropTypes.string,
  icon: PropTypes.string,
  title: PropTypes.string,
  message: PropTypes.string,
  imageUrl: PropTypes.string,
  autohide: PropTypes.bool,
  delay: PropTypes.number,
  removeNotification: PropTypes.func,
};

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

export const Notification = connect(null, {removeNotification})(NotificationConnected);