import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { withState, withProps, compose, withHandlers } from 'recompose'
import { EnrollModal } from '@drifthq/sequence-enroll-modal'

import * as AuthSelectors from '../modules/auth/selectors'
import * as PlaybookSelectors from '../modules/playbook/selectors'
import * as PlaybookActions from '../modules/playbook/actions'
import * as OrgSelectors from '../modules/org/selectors'

// need to actually use these.
import {
  // IEnrollModalContainerMapStateToProps,
  // IEnrollModalContainerMapDispatchToProps,
  IEnrollModalContainerProps,
  IEnrollModalProps,
} from '../modules/playbook/interfaces'

import TinyEditor from '../TinyEditor'

import './style.styl'

const mapStateToProps = (state: any, props: IEnrollModalContainerProps) => ({
  emails: PlaybookSelectors.emails(state, props),
  enrolledSequenceCount: PlaybookSelectors.enrolledSequenceCount(state),
  enrolledSequenceCountLoaded: PlaybookSelectors.enrolledSequenceCountLoaded(state),
  playbookForEndUser: PlaybookSelectors.playbookForEndUser(state, props),
  playbookList: PlaybookSelectors.playbookList(state) || [],
  fetchPlaybookForEndUserPending: PlaybookSelectors.fetchPlaybookForEndUserPending(state, props),
  enrollingPlaybookId: PlaybookSelectors.enrollingPlaybookId(state, props),
  enrollSucceeded: PlaybookSelectors.enrollSucceeded(state, props),
  enrollFailed: PlaybookSelectors.enrollFailed(state, props),
  enrollErrorsByEmail: PlaybookSelectors.enrollErrorsByEmail(state),
  hasSalesSequences: AuthSelectors.hasSalesSequences(state),
  refreshPending: PlaybookSelectors.searchPlaybooksPending(state),
  isAdmin: AuthSelectors.isAdmin(state),
  usersById: OrgSelectors.usersById(state),
})

const mapDispatchToProps = (dispatch: any) => ({
  actions: bindActionCreators({
    enroll: PlaybookActions.enroll,
    fetchPlaybookForEndUser: PlaybookActions.fetchPlaybookForEndUser,
    setPlaybookForEndUserMessage: PlaybookActions.setPlaybookForEndUserMessage,
    setPlaybookForEndUserSubject: PlaybookActions.setPlaybookForEndUserSubject,
    clearState: PlaybookActions.clearState,
    searchPlaybooks: PlaybookActions.searchPlaybooks,
  }, dispatch),
})

export default compose(
  withState('tabId', undefined, (props: IEnrollModalContainerProps) => props.tabId),
  connect(mapStateToProps, mapDispatchToProps),
  withHandlers({
    onEditClick: (props: IEnrollModalProps) => (playbookId: number) => () => {
      const { actions, emails, tabId } = props
      const email = emails[0]
      actions.fetchPlaybookForEndUser({ email, playbookId, tabId })
    },
    onRefreshClick: (props: IEnrollModalProps) => () => {
      const { actions } = props
      actions.searchPlaybooks()
    },
    onSubjectChange: (props: IEnrollModalProps) => (i: number) => (subject: any) => {
      const { actions, tabId } = props
      actions.setPlaybookForEndUserSubject({ tabId, index: i, subject: subject })
    },
    onMessageChange: (props: IEnrollModalProps) => (i: number) => (message: any) => {
      const { actions, tabId } = props
      actions.setPlaybookForEndUserMessage({ tabId, index: i, message: message })
    },
    onCloseClick: (props: IEnrollModalProps) => () => {
      const { actions, tabId, emails } = props
      window.parent.postMessage({ type: '@@driftext/hide_enroll_modal' }, '*')
      actions.clearState({ tabId, emails })
    },
    onEnrollClick: (props: IEnrollModalProps) => (playbookId: number) => () => {
      const { tabId, emails, enrolledSequenceCount, actions, playbookForEndUser } = props
      emails.slice(0, 150 - enrolledSequenceCount).forEach((email: string) => {
        actions.enroll({
          email,
          tabId,
          playbookId,
          action: playbookForEndUser ? playbookForEndUser.actions[0].action : undefined,
        })
      })
    },
  }),
  withProps((props: IEnrollModalProps) => ({ Editor: TinyEditor, enrollPending: !!props.enrollingPlaybookId })),
)(EnrollModal) as any