import React, { Component } from 'react';
import { Form, Message } from 'semantic-ui-react';
import { auth, fetchProfile } from '../../api';

export default class Unauthed extends Component {
  constructor(props) {
    super(props);
    this.state = {loading: false, message: false};
  }

  login = async (data) => {
    const {accountAuth, accountProfile} = this.props;
    this.setState({
      loading: true, message: false
    });
    let resp = data && await auth(data);
    const token = resp && resp.ok && resp.token;
    this.setState({
      loading: false, message: !token && (resp.message || 'Unknown Error')
    });
    if (!token)
      return;
    accountAuth(token);
    resp = token && await fetchProfile(token);
    resp && resp.ok && resp.data && accountProfile(resp.data);
  }

  onSubmit = (e) => {
    e.preventDefault();
    const fields = e.target.elements;
    if (!fields)
      return;
    let data = {}, b = false;
    for (let field of fields) {
      if (!field.name) continue;
      data[field.name] = field.value;
      b = true;
    }
    b && this.login(data);
  }

  render () {
    const { loading, message } = this.state;
    return (
      <Form onSubmit={this.onSubmit} loading={loading} error={Boolean(message)}>
          <Form.Input
            name="username" required
            fluid icon='user' iconPosition='left' placeholder='Username'
          />
          <Form.Input
            name="password" type='password' required
            fluid icon='lock' iconPosition='left' placeholder='Password'
          />
          <Form.Button type="submit" fluid color='blue'>Log in</Form.Button>
          {message && <Message error size='small' content={message} />}
      </Form>
    );
  }
}