import React from "react"
import { api } from "src/API"
import PropTypes from "prop-types"
import { MessageModal, WaitModal } from "../Modal"
import autobind from "autobind-decorator"

export class ConfirmEmail extends React.Component {
  static propTypes = {
    history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
  }

  constructor() {
    super()
    this.state = {
      waitModal: null,
      messageModal: null,
    }
  }

  componentDidMount(props) {
    const emailToken = new URLSearchParams(
      decodeURIComponent(window.location.search)
    ).get("email-token")

    this.setState({ waitModal: { message: "Validating Email..." } })

    if (emailToken) {
      api
        .logout()
        .then(() => {
          return api.confirmEmail(emailToken)
        })
        .then((response) => {
          this.setState({ waitModal: null })
          if (response && response.passwordToken) {
            this.setState({
              waitModal: null,
              messageModal: {
                icon: "thumb",
                message: `Your email is confirmed. You will be redirected to set your password.`,
                // API will send a password reset token if this is the first time loggin on
                redirect: `/reset-password?password-token=${
                  response.passwordToken
                }`,
              },
            })
          } else {
            this.props.history.replace("/login")
          }
        })
        .catch((err) => {
          this.setState({
            waitModal: null,
            messageModal: {
              icon: "hand",
              message: `Please contact ${
                process.env.REACT_APP_SUPPORT_EMAIL
              } to request another confirmation email.`,
              detail: err.message,
            },
          })
        })
    } else {
      this.props.history.replace("/")
    }
  }

  @autobind
  handleMessageModalDismiss() {
    const { redirect } = this.state.messageModal

    this.setState({ messageModal: null })
    this.props.history.replace(redirect || "/login")
  }

  render() {
    const { messageModal, waitModal } = this.state

    return (
      <div>
        <WaitModal
          open={!!waitModal}
          message={waitModal ? waitModal.message : ""}
        />

        <MessageModal
          open={!!messageModal}
          icon={messageModal ? messageModal.icon : ""}
          message={messageModal ? messageModal.message : ""}
          detail={messageModal ? messageModal.title : ""}
          onDismiss={this.handleMessageModalDismiss}
        />
      </div>
    )
  }
}