import React, { Fragment, Component } from "react"
import { ProfileForm } from "./ProfileForm"
import { api } from "src/API"
import {
  WaitModal,
  MessageModal,
  ChangePasswordModal,
  ChangeEmailModal,
} from "../Modal"
import { Column, Row } from "ui"
import { sizeInfo } from "ui/style"
import autobind from "autobind-decorator"

export class Profile extends Component {
  constructor(props) {
    super(props)

    const user = api.loggedInUser
    this.state = {
      messageModal: null,
      waitModal: null,
      changePasswordModal: null,
      changeEmailModal: null,
      progressModal: null,
      uploadPercent: 0,
      user,
    }
  }

  @autobind
  handleSaved(user) {
    this.setState({ waitModal: { message: "Updating Profile" } })
    api
      .updateUser(user)
      .then((updatedUser) => {
        this.setState({
          waitModal: null,
          user: updatedUser,
        })
      })
      .catch((error) => {
        this.setState({
          waitModal: null,
          messageModal: {
            icon: "hand",
            message: "Unable to save the profile changes.",
            detail: error.message,
          },
        })
      })
  }

  @autobind
  handleMessageModalDismiss() {
    this.setState({ messageModal: null })
  }

  @autobind
  handleChangePassword() {
    this.setState({ changePasswordModal: true })
  }

  @autobind
  handleChangePasswordDismiss(passwords) {
    this.setState({ changePasswordModal: false })

    if (passwords) {
      this.setState({
        waitModal: { message: "Changing Password" },
      })
      api
        .changePassword(passwords)
        .then(() => {
          this.setState({ waitModal: false })
        })
        .catch((error) => {
          this.setState({
            waitModal: false,
            messageModal: {
              icon: "hand",
              message: "Unable to change password",
              detail: error.message,
            },
          })
        })
    }
  }

  @autobind
  handleChangeEmail(oldEmail) {
    this.setState({ changeEmailModal: { oldEmail } })
  }

  @autobind
  handleChangeEmailDismiss(newEmail) {
    this.setState({ changeEmailModal: null })
    if (!newEmail) {
      return
    }
    this.setState({
      waitModal: { message: "Requesting Email Change..." },
    })
    api
      .sendConfirmEmail({ newEmail })
      .then(() => {
        this.setState({
          waitModal: null,
          messageModal: {
            icon: "thumb",
            message: `An email has been sent to '${newEmail}' with a link that you need to click on to finish changing your email.`,
          },
        })
      })
      .catch((error) => {
        this.setState({
          waitModal: null,
          messageModal: {
            icon: "hand",
            message: "Unable to request email change.",
            detail: error.message,
          },
        })
      })
  }

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

    return (
      <Fragment>
        <Column.Item grow />
        <Column.Item>
          <Row>
            <Row.Item grow />
            <Row.Item width={sizeInfo.profileWidth}>
              <ProfileForm
                user={this.state.user}
                onSaved={this.handleSaved}
                onSelectImage={this.handleSelectImage}
                onChangePassword={this.handleChangePassword}
                onChangeEmail={this.handleChangeEmail}
                userImageUrl={this.state.userImageUrl}
              />
            </Row.Item>
            <Row.Item grow />
          </Row>
        </Column.Item>
        <Column.Item>
          <MessageModal
            open={!!messageModal}
            icon={messageModal ? messageModal.icon : ""}
            title={messageModal ? messageModal.title : ""}
            message={messageModal ? messageModal.message : ""}
            onDismiss={this.handleMessageModalDismiss}
          />

          <ChangeEmailModal
            open={!!changeEmailModal}
            oldEmail={changeEmailModal ? changeEmailModal.oldEmail : ""}
            onDismiss={this.handleChangeEmailDismiss}
          />

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

          <ChangePasswordModal
            open={!!changePasswordModal}
            onDismiss={this.handleChangePasswordDismiss}
          />
        </Column.Item>
        <Column.Item grow />
      </Fragment>
    )
  }
}