/* @flow */

import React from 'react';
import Relay from 'react-relay';

import cookies from 'browser-cookies';

import LoginForm from './LoginForm';
import LoginMutation from './mutations/LoginMutation';


class Login extends React.Component {
  props: {
    relay: Object,
    viewer: Object,
  };

  state: {
    isSubmitting: boolean,
    errorMsg: ?string,
  };

  constructor(props) {
    super(props);
    this.state = {
      isSubmitting: false,
      errorMsg: null,
    };
  }

  submit = (values) => {
    const { relay, viewer } = this.props;

    this.setState({isSubmitting: true});

    relay.commitUpdate(
      new LoginMutation({
        values,
        viewer,
      }), {
        onSuccess: ({ login }) => {
          const { token } = login;
          const { currentUser } = login.viewer;

          if (token && currentUser) {
            cookies.set('token', token);
            /* do something else, like navigate, or close the form */
          } else {
            this.setState({errorMsg: 'BAD!', isSubmitting: false});
          }
        }
      },
    );
  };

  render() {
    const { errorMsg, isSubmitting } = this.state;

    return (
      <div>
        {errorMsg}
        <LoginForm isSubmitting={isSubmitting} onSubmit={this.submit} initialModel={{
          username: '',
          password: '',
        }} />
      </div>
    );
  }
}


export default Relay.createContainer(Login, {
  fragments: {
    node: () => Relay.QL`
      fragment on Viewer {
        ${LoginMutation.getFragment('viewer')}
      }
    `,
  },
});