import ModalPanel from '@admin/components/modal_panel'
import Search from '@admin/components/search'
import PropTypes from 'prop-types'
import React from 'react'

class Accounts extends React.Component {

  static contextTypes = {
    admin: PropTypes.object,
    host: PropTypes.object
  }

  static propTypes = {
    onPop: PropTypes.func,
    onPush: PropTypes.func
  }

  _handleBack = this._handleBack.bind(this)
  _handleChoose = this._handleChoose.bind(this)

  render() {
    return (
      <ModalPanel { ...this._getPanel() }>
        <Search { ...this._getSearch() } />
      </ModalPanel>
    )
  }

  _getPanel() {
    return {
      title: 't(Connect Email Account)',
      leftItems: [
        { icon: 'chevron-left', handler: this._handleBack }
      ]
    }
  }

  _getSearch() {
    const { features } = this.context.admin
    return {
      search: false,
      options: [
        ...features.google ? [
          { value: 'gmail', text: 't(Gmail)' }
        ] : [],
        { value: 'outlook', text: 't(Outlook 365)' }
      ],
      valueKey: null,
      textKey: 'text',
      format: ({ option }) => (
        <div className="profile-token">
          <div className="profile-token-icon">
            <img src={`/images/services/${option.value}.png`} />
          </div>
          <div className="profile-token-label">
            <strong>{ option.text }</strong><br />
            Connect to a { option.text } account
          </div>
        </div>
      ),
      onChange: this._handleChoose
    }
  }

  _handleChoose(option) {
    const { token } = this.context.admin.team
    this.context.host.openWindow(`${process.env.ADMIN_HOST}/admin/oauth/${option.value}/authorize?type=emails&token=${token}`)
    this.props.onPop(-2)
  }

  _handleBack() {
    this.props.onPop()
  }

}

export default Accounts
