import React, { Component } from 'react'
import { doLogin } from '../redux/actions/userAct'
import PaddedRow from './PaddedRow'
import Spinner from './Spinner'
import getUrl from '../util/getUrl'

export default class Setup extends Component {
  state = {
    email: '',
    password: '',
    confirmPass: '',
    pending: false,
    error: null,
  }
  updVal = e => {
    const el = e.target
    let key = 'email'
    if (el.id === 'pass') key = 'password'
    else if (el.id === 'pass2') key = 'confirmPass'
    const obj = {}
    obj[key] = el.value
    this.setState(obj)
  }
  submit = e => {
    e.preventDefault()
    let { email, password, confirmPass, pending } = this.state
    if (pending) return
    email = email.trim()
    password = password.trim()
    confirmPass = confirmPass.trim()
    const hasEmpty = [email, password, confirmPass].some(
      val => val.length === 0
    )

    if (hasEmpty) return
    if (password.toLowerCase() !== confirmPass.toLowerCase()) {
      return this.setState({ error: "Passwords don't match" })
    }
    this.setState({ pending: true, error: null })
    const defaultErr = 'Could not create account'

    fetch(getUrl('users'), {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password, admin: true }),
    })
      .then(res => {
        if (res.ok) {
          return doLogin({ email, password }, null, true)
        }
        res.json().then(({ message }) => {
          const error = message || defaultErr
          this.setState({ pending: false, error })
        })
      })
      .catch(err => {
        const error = err.message || defaultErr
        this.setState({ pending: false, error })
      })
  }
  render() {
    const { pending, error } = this.state
    return (
      <div className="container content">
        <PaddedRow amount={25} vCenter>
          <div className="column">
            <h3>Setup account</h3>
            <form noValidate>
              <fieldset>
                <label htmlFor="email">Email:</label>
                <input
                  type="email"
                  autoFocus
                  id="email"
                  placeholder={"Your email (does't have to be actual email)"}
                  onChange={this.updVal}
                />
                <label htmlFor="pass">Password:</label>
                <input
                  type="password"
                  id="pass"
                  maxLength={512}
                  placeholder="A super secret password"
                  onChange={this.updVal}
                />
                <label htmlFor="pass2">Confirm Password:</label>
                <input
                  type="password"
                  id="pass2"
                  maxLength={512}
                  placeholder="Confirm your super secret password"
                  onChange={this.updVal}
                />
                <button className="float-right" onClick={this.submit}>
                  {pending ? <Spinner /> : 'Submit'}
                </button>
                {!error ? null : <p className="danger">{error}</p>}
              </fieldset>
            </form>
          </div>
        </PaddedRow>
      </div>
    )
  }
}