import React, { Component } from 'react'
import { connect } from 'react-redux'
import fetch from 'isomorphic-unfetch'
import Page from '../comps/Page'
import PaddedRow from '../comps/PaddedRow'
import Spinner from '../comps/Spinner'
import updStateFromId from '../util/updStateFromId'
import mapUser from '../util/mapUser'
import getUrl from '../util/getUrl'
import getJwt from '../util/getJwt'

class Settings extends Component {
  state = {
    pending: false,
    passErr: null,
    curPass: '',
    newPass: '',
    confPass: '',
  }
  updVal = updStateFromId.bind(this)
  submit = async e => {
    e.preventDefault()
    const { pending, curPass, newPass, confPass } = this.state
    const { email, _id } = this.props.user
    if (pending) return
    const doErr = passErr => this.setState({ pending: false, passErr })
    const vals = {
      'Current password': curPass,
      'New password': newPass,
      'Confirm new password': confPass,
    }
    const keys = Object.keys(vals)
    for (let i = 0; i < keys.length; i++) {
      let key = keys[i],
        val = vals[key]
      if (val.length === 0) return doErr(`${key} is required`)
    }
    if (newPass !== confPass) return doErr("New passwords don't match")

    this.setState({ passErr: null, pending: true })
    const updRes = await fetch(getUrl('users/' + _id), {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json', Authorization: getJwt() },
      body: JSON.stringify({ email, password: curPass, newPassword: newPass }),
    }).catch(doErr)
    if (updRes.ok) {
      this.setState({
        curPass: '',
        newPass: '',
        confPass: '',
        passErr: 'Password updated successfully',
        pending: false,
      })
    } else {
      let message = 'failed to update password'
      try {
        const data = await updRes.json()
        message = data.message || message
      } catch (err) {
        doErr(err.message)
      }
      doErr(message)
    }
  }
  render() {
    const { pending, passErr, curPass, newPass, confPass } = this.state

    return (
      <Page>
        <PaddedRow amount={25}>
          <h3>Account settings</h3>
          <hr />
          <form noValidate style={{ padding: '0 0 45px' }}>
            <h4>Change password</h4>
            <fieldset>
              <label htmlFor="curPass">Current Password</label>
              <input
                type="password"
                id="curPass"
                onChange={this.updVal}
                placeholder="Current super secret password..."
                value={curPass}
              />
              <label htmlFor="newPass">New Password</label>
              <input
                type="password"
                id="newPass"
                onChange={this.updVal}
                placeholder="New super secret password..."
                value={newPass}
              />
              <label htmlFor="confPass">Confirm New Password</label>
              <input
                type="password"
                id="confPass"
                onChange={this.updVal}
                placeholder="Confirm new super secret password..."
                value={confPass}
              />
            </fieldset>
            <button
              onClick={this.submit}
              className={'float-right' + (pending ? ' disabled' : '')}
            >
              {pending ? <Spinner /> : 'Submit'}
            </button>
            {!passErr ? null : <p>{passErr}</p>}
          </form>
        </PaddedRow>
      </Page>
    )
  }
}
export default connect(mapUser)(Settings)