import React from 'react'
import { api } from '../helpers'
import PropTypes from 'prop-types'
import { Container } from 'semantic-ui-react'
import { MessageDialog, WaitDialog } from '../Dialog'
import './ConfirmEmail.scss'

export class ConfirmEmail extends React.Component {
  static propTypes = {
    history: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
  }
  constructor() {
    super()
    this.state = {
      waitDialog: null,
      messageDialog: null
    }
    this.handleMessageDialogDismiss = this.handleMessageDialogDismiss.bind(this)
  }

  componentDidMount(props) {
    let emailToken = new URLSearchParams(decodeURIComponent(window.location.search)).get('email-token')
    this.setState({ waitDialog: { message: 'Validating Email...' } })
    if (emailToken) {
      api.confirmEmail(emailToken).then((response) => {
        this.setState({ waitDialog: null })
        if (response && response.passwordToken) {
          // API will send a password reset token if this is the first time loggin on
          this.props.history.replace(`/reset-password?password-token=${response.passwordToken}`)
        } else {
          this.props.history.replace('/login')
        }
      }).catch((err) => {
        console.error(err)
        const supportEmail = 'support@kingstonsoftware.solutions' // TODO: From configuration
        const message = err.message.includes('The token was not found')
        ? 'This email address may have already been confirmed.'
        : `Please contact ${supportEmail} to request a new user invitation`
        this.setState({
          waitDialog: null,
          messageDialog: {
            title: 'Error Verifying Email...',
            message: `We couldn't complete that request. ${message}`
          }
        })
      })
    } else {
      this.props.history.replace('/login')
    }
  }

  handleMessageDialogDismiss() {
    this.setState({ messageDialog: null })
    this.props.history.replace('/login')
  }

  render() {
    return (
      <Container className='email-confirm-container'>
        <WaitDialog active={!!this.state.waitDialog}
          message={this.state.waitDialog ? this.state.waitDialog.message : ''} />

        <MessageDialog error open={!!this.state.messageDialog}
          title={this.state.messageDialog ? this.state.messageDialog.title : ''}
          message={this.state.messageDialog ? this.state.messageDialog.message : ''}
          onDismiss={this.handleMessageDialogDismiss} />
      </Container>
    )
  }
}