import { Observable } from 'rxjs'
import { combineEpics, ActionsObservable } from 'redux-observable'
import { Store } from 'redux'

import * as actions from './actions'
import * as SettingsActions from '../settings/actions'
import { IToastMessage } from './interfaces'

import { createUnfollowDomainToastMessage, createUnfollowEmailToastMessage } from '../../popup/PopupToast/utils'

export const createToastMessageOnDomainListAdd = (action$: ActionsObservable<any>, { getState }: Store<any>) => {
  return action$.ofType(SettingsActions.addDomainToMuteList.toString())
    .pluck('payload')
    .mergeMap((domain: string) => {
      const toastMessage = createUnfollowDomainToastMessage(domain) 
      return Observable.of(actions.showToastMessage(toastMessage))
    })
}

export const createToastMessageOnEmailListAdd = (action$: ActionsObservable<any>, { getState }: Store<any>) => {
  return action$.ofType(SettingsActions.addEmailToMuteList.toString())
    .pluck('payload')
    .mergeMap((email: string) => {
      const toastMessage = createUnfollowEmailToastMessage(email)
      return Observable.of(actions.showToastMessage(toastMessage))
    })
}

export const toastMessageTimeoutEpic = (action$: ActionsObservable<any>, { getState }: Store<any>) => {
  return action$.ofType(actions.showToastMessage.toString())
    .pluck('payload')
    .delay(7000)
    .mergeMap((toastMessage: IToastMessage) => Observable.of(actions.removeToastMessage(toastMessage)))
}

export const epic = combineEpics(
  createToastMessageOnDomainListAdd,
  createToastMessageOnEmailListAdd,
  toastMessageTimeoutEpic,
)