import * as React from 'react'
import { map } from 'lodash'
import { IPopupToastProps } from './interfaces'

import './styles.styl'

const PopupToast = ({ toastMessages, actions }: IPopupToastProps) => {
  return <div className="toast-message-container">
    {map(toastMessages, toastMessage =>
      <div className={`toast`}>
        <div className="message" dangerouslySetInnerHTML={{ __html: toastMessage.message }} />
        <div className="toast-actions">
          <button type={'subtle'} className="toast-undo" onClick={() => {
            (actions as any)[toastMessage.undoFn](toastMessage.key)
            actions.removeToastMessage(toastMessage)
          }}>Undo</button>
          <div onClick={() => actions.removeToastMessage(toastMessage)} className="close">x</div>
        </div>
      </div>)
    }
  </div>
}
  

export default PopupToast