import React, { Component } from 'react'
import './App.css'

class App extends Component {
  constructor () {
    super()

    this.state = {
      email: '',
      confirmEmail: '',
      userName: '',
      password: '',
      confirmPassword: '',
      agreeWithTerms: false,
      legitMail: false,
      legitName: true,
      legitPassword: true
    }

    this.submitReg = () => {
      let payload = this.state

      let data = new FormData()

      // data.append('json', JSON.stringify(payload))

      console.log(payload)

      fetch('http://localhost:5000/auth/signup', {
        headers: { 'Content-Type': 'application/json' },
        method: 'POST',
        body: JSON.stringify(payload)
      })
        .then(r => {
          return r.json()
        })
        .then(pr => {
          console.log(pr)
        })
    }

    this.submiLog = () => {}

    this.promisfyState = newState => {
      return new Promise(res => {
        this.setState(newState, res)
      })
    }
  }

  async componentDidUpdate () {
    if (this.state.email !== '') {
      if (this.state.email === this.state.confirmEmail) {
        await this.promisfyState({ legitMail: true })
      } else {
        await this.promisfyState({ legitMail: false })
      }
    }
  }

  shouldComponentUpdate (nextProps, nextState) {
    if (this.state.email === nextState.email) {
      return false
    } else {
      return true
    }
  }

  render () {
    return (
      <div className='App'>
        {console.log(this.state.legitMail)}
        <div style={{ display: 'inline-grid' }}>
          {console.log(this.state)}
          <h2>Sign Up</h2>
          <label for='Email'>Email</label>
          <div>
            <input
              style={{ width: '300px' }}
              onChange={async e =>
                await this.promisfyState({ email: e.target.value })}
              id='Email'
              name='Email'
              type='text'
            />
            <i
              style={{
                display: this.state.legitMail ? '' : 'none',
                'margin-left': '-23px'
              }}
            >
              ✅
            </i>
            <i
              style={{
                display: this.state.legitMail ? 'none' : '',
                'margin-left': '-23px'
              }}
            >
              ❌
            </i>
          </div>

          <div>
            <label for='ConfirmEmail'>Confirm Email</label>
            <input
              style={{ width: '300px' }}
              onChange={e => this.setState({ confirmEmail: e.target.value })}
              id='ConfirmEmail'
              name='ConfirmEmail'
              type='text'
            />
            <i
              style={{
                display: this.state.legitMail ? '' : 'none',
                'margin-left': '-23px'
              }}
            >
              ✅
            </i>
            <i
              style={{
                display: this.state.legitMail ? 'none' : '',
                'margin-left': '-23px'
              }}
            >
              ❌
            </i>
          </div>

          {/* <label for='Email' class='floatLabel'>User Name</label>
          <input
            onChange={e => this.setState({ userName: e.target.value })}
            id='Email'
            name='Email'
            type='text'
          />

          <label for='password' class='floatLabel'>Password</label>
          <input
            onChange={e => this.setState({ password: e.target.value })}
            id='password'
            name='password'
            type='password'
          />
          <span>Enter a password longer than 8 characters</span>

          <label for='confirm_password' class='floatLabel'>
            Confirm Password
          </label>
          <input
            onChange={e => this.setState({ confirmPassword: e.target.value })}
            id='confirm_password'
            name='confirm_password'
            type='password'
          />

          <div>
            <input
              onChange={() => {
                this.setState({
                  agreeWithTerms: !this.state.agreeWithTerms
                })
              }}
              id='checkBox'
              type='checkbox'
            />
            <label for='checkBox'>
              I agree with the terms
            </label>
          </div>

          <input type='submit' value='Create My Account' id='submit' /> */}
        </div>
      </div>
    )
  }
}

export default App