text: 'use strict';
  
  import classnames from 'classnames';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import SessionStore from '../stores/SessionStore';
  import { Alert, Button, Form, FormField, FormInput } from 'elemental';
  import { createHistory } from 'history';
  
  var history = createHistory();
  
  var SigninView = React.createClass({
    getInitialState() {
      return {
        email: '',
        password: '',
        securitycode: '',
        isAnimating: false,
        isInvalid: false,
        invalidMessage: '',
        signedOut: window.location.search === '?signedout',
      };
    },
    componentDidMount() {
      if (this.state.signedOut && window.history.replaceState) {
        history.replaceState({}, window.location.pathname);
      }
      if (this.refs.email) {
        ReactDOM.findDOMNode(this.refs.email).select();
      }
    },
    handleInputChange(e) {
      let newState = {};
      newState[e.target.name] = e.target.value;
      this.setState(newState);
    },
    handleSubmit(e) {
      e.preventDefault();
      if (!this.state.email || !this.state.password) {
        return this.displayError('Please enter an email address and password to sign in.');
      }
      if (!this.state.securitycode) {
        return this.displayError('Please enter the security code on your mobile to sign in.');
      }
      SessionStore.signin({
        email: this.state.email,
        password: this.state.password,
        securitycode: this.state.securitycode,
      }, (err, data) => {
        if (err) {
          const error = err.error;
          switch (error.clientMessageType) {
            case 'SECURITY_CODE_NOT_ENABLED':
              this.displayError('The security code of your account is not enabled yet. Please contact the system manager.');
              break;
            case 'INVALID_SECURITY_CODE':
              this.displayError('The security code you entered is invalid. Please try it again.');
              break;
            case 'NO_EMAIL_OR_PASSWORD':
              this.displayError('Please enter an email address and password to sign in.');
              break;
            case 'NO_SECURITY_CODE':
              this.displayError('Please enter the security code on your mobile to sign in.');
              break;
            case 'INVALID_PASSWORD':
            default:
              this.displayError('The password and security code you entered are not valid.');
              break;
          }
        } else if (data && data.error) {
          this.displayError('The password and security code you entered are not valid.');
        } else {
          top.location.href = this.props.from ? Keystone.adminPath + this.props.from : Keystone.adminPath;
        }
      });
    },
    displayError(message) {
      this.setState({
        isAnimating: true,
        isInvalid: true,
        invalidMessage: message,
      });
      setTimeout(this.finishAnimation, 750);
    },
    finishAnimation() {
      if (!this.isMounted()) return;
      if (this.refs.email) {
        ReactDOM.findDOMNode(this.refs.email).select();
      }
      this.setState({
        isAnimating: false,
      });
    },
    renderBrand() {
      let logo = { src: `${Keystone.adminPath}/images/logo.png`, width: 205, height: 68 };
      if (this.props.logo) {
        logo = typeof this.props.logo === 'string' ? { src: this.props.logo } : this.props.logo;
        // TODO: Deprecate this
        if (Array.isArray(logo)) {
          logo = { src: logo[0], width: logo[1], height: logo[2] };
        }
      }
      return (
        <div className="auth-box__col">
          <div className="auth-box__brand">
            <a href="/" className="auth-box__brand__logo">
              <img src={logo.src} width={logo.width ? logo.width : null} height={logo.height ? logo.height : null} alt={this.props.brand} />
            </a>
          </div>
        </div>
      );
    },
    renderUserInfo() {
      if (!this.props.user) return null;
      let openKeystoneButton = this.props.userCanAccessKeystone ? <Button href={Keystone.adminPath} type="primary">Open Keystone</Button> : null;
      return (
        <div className="auth-box__col">
          <p>Hi {this.props.user.name.first},</p>
          <p>You're already signed in.</p>
          {openKeystoneButton}
          <Button href={`${Keystone.adminPath}/signout`} type="link-cancel">Sign Out</Button>
        </div>
      );
    },
    renderAlert() {
      if (this.state.isInvalid) {
        return <Alert key="error" type="danger" style={{ textAlign: 'center' }}>{this.state.invalidMessage}</Alert>;
      } else if (this.state.signedOut) {
        return <Alert key="signed-out" type="info" style={{ textAlign: 'center' }}>You have been signed out.</Alert>;
      } else {
        /* eslint-disable react/self-closing-comp */
        // TODO: This probably isn't the best way to do this, we
        // shouldn't be using Elemental classNames instead of components
        return <div key="fake" className="Alert Alert--placeholder">&nbsp;</div>;
        /* eslint-enable */
      }
    },
    renderForm() {
      if (this.props.user) return null;
      return (
        <div className="auth-box__col">
          <Form method="post" onSubmit={this.handleSubmit} noValidate>
            <FormField label="Email" htmlFor="email">
              <FormInput type="email" name="email" onChange={this.handleInputChange} value={this.state.email} ref="email" />
            </FormField>
            <FormField label="Password" htmlFor="password">
              <FormInput type="password" name="password" onChange={this.handleInputChange} value={this.state.password} ref="password" />
            </FormField>
            <FormField label="Security Code" htmlFor="securitycode">
              <FormInput autoComplete="off" type="text" name="securitycode" onChange={this.handleInputChange} value={this.state.securitycode} ref="securitycode" />
            </FormField>
            <Button disabled={this.state.animating} type="primary" submit>Sign In</Button>
            {/* <Button disabled={this.state.animating} type="link-text">Forgot Password?</Button> */}
          </Form>
        </div>
      );
    },
    render() {
      let boxClassname = classnames('auth-box', {
        'auth-box--has-errors': this.state.isAnimating,
      });
      return (
        <div className="auth-wrapper">
          {this.renderAlert()}
          <div className={boxClassname}>
            <h1 className="u-hidden-visually">{this.props.brand ? this.props.brand : 'Keystone'} Sign In </h1>
            <div className="auth-box__inner">
              {this.renderBrand()}
              {this.renderUserInfo()}
              {this.renderForm()}
            </div>
          </div>
          <div className="auth-footer">
            <span>Powered by </span>
            <a href="http://keystonejs.com" target="_blank" title="The Node.js CMS and web application platform (new window)">KeystoneJS</a>
          </div>
        </div>
      );
    },
  });
  
  ReactDOM.render(
    <SigninView
      brand={Keystone.brand}
      from={Keystone.from}
      logo={Keystone.logo}
      user={Keystone.user}
      userCanAccessKeystone={Keystone.userCanAccessKeystone}
    />,
    document.getElementById('signin-view')
  );
  