import reactToast, { toast } from 'react-tal-toast'

class Toast extends Component {
  toastFromBottom = _ => {
    toast()
  }
 
  toastFromTop = _ => {
    toast({
      text: "Toast From Top",
      className: "bounceInDown",
      position: 'top'
    })
  }
 
  toastSuccess = _ => {
    reactToast.succee()
  }
 
  toastDangerCenter = () => {
    reactToast.danger({
      position: 'center',
      className: "zoomIn"
    })
  }
  
  render() {
    return (
      <div className="toast">
        <h1>React Toast</h1>
        <ul>
          <li onClick={this.toastFromBottom}>Info from Bottom</li>
          <li onClick={this.toastFromTop}>Info from top</li>
          <li onClick={this.toastSuccess}>Success</li>
          <li onClick={_ => reactToast.warning()}>Warning</li>
          <li onClick={this.toastDangerCenter}>Danger</li>
        </ul>
      </div>
    )
  }
}