import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { getToasts } from '../selectors'
import { dismissToast } from '../actions/toasts'
import { CX } from '../constants'
import Toast from '../components/toast'

class ToastsContainer extends React.PureComponent {

  handleOnDismiss = (key) => {
    this.props.dispatch(dismissToast(key))
  }

  render() {
    // const { notifications } = this.props
    const notifications = [
      {
        key: '1',
        title: 'Error',
        to: 'to',
        image: 'https://gab.com/media/user/58077e8a49705.jpg',
        message: 'Unable to follow @andrew',
        date: new Date(),
        isImageAccount: true,
      },
      {
        key: '2',
        title: 'Success',
        to: 'to',
        image: 'https://gab.com/media/user/58077e8a49705.jpg',
        message: 'Your gab was posted. Click here to view',
        date: new Date(),
        isImageAccount: false,
      },
      {
        key: '3',
        title: '',
        to: 'to',
        image: 'https://gab.com/media/user/58077e8a49705.jpg',
        message: 'Unable to follow @andrew',
        date: new Date(),
        isImageAccount: true,
      },
      {
        key: '4',
        title: '',
        to: 'to',
        image: 'https://gab.com/media/user/58077e8a49705.jpg',
        message: 'Your gab was posted. Click here to view',
        date: new Date(),
        isImageAccount: false,
      },
      {
        key: '5',
        title: '',
        to: 'to',
        message: 'Your gab was deleted',
        date: new Date(),
        isImageAccount: false,
      },
    ]

    const hasNotifications = Array.isArray(notifications) && notifications.length > 0
    
    const containerClasses = CX({
      d: 1,
      z5: 1,
      posFixed: 1,
      bottom0: 1,
      left0: 1,
      pl15: 1,
      pt15: 1,
      heightMax100VH: 1,
      pb10: 1,
      displayNone: !hasNotifications
    })
  

    return (
      <div className={containerClasses}>
        {
          !hasNotifications && notifications.map((notification) => (
            <Toast
              onDismiss={this.handleOnDismiss}
              key={notification.key}
              id={notification.key}
              title={notification.title}
              to={notification.to}
              image={notification.image}
              message={notification.message}
              date={notification.date}
              isImageAccount={notification.isImageAccount}
            />
          ))
        }
      </div>
    )

  }

}

const mapStateToProps = (state) => {
  const notifications = getToasts(state)
  if (!notifications) return {}
  return { notifications }
}

ToastsContainer.propTypes = {
  notifications: PropTypes.array,
}

export default connect(mapStateToProps)(ToastsContainer)