import React                              from 'react';
  import { Link }                           from 'react-router';
  import { ActionButton }                   from '/imports/client/components/ActionButton';
  import { setQueryParam }                  from '/imports/client/app/utils/setQueryParam';
  import { Button, Form, FormGroup, Label, Input, FormText, Col } from 'reactstrap';
  import { Alert }                          from 'reactstrap';
  import 'velocity-animate';
  import 'velocity-animate/velocity.ui';
  import { VelocityComponent, VelocityTransitionGroup, velocityHelpers } from 'velocity-react';
  import ReactSVG                           from 'react-svg'
  
  
  export class LoginPane extends React.Component {
  
    render() {
      return (
        <Col lg={{ size: 6, pull: 2, push: 2, offset: 1 }} md={{ size: 9, pull: 1, push: 1 }} sm={{ size: 10, push: 1, pull: 1 }}>
          <VelocityTransitionGroup enter={{ animation: "transition.slideRightIn"}} leave={{animation: "transition.fadeOut" }} runOnMount={true}>
            <div className="enterPane__centerVerticallyWrapper">
              <Link
                to={ setQueryParam(this.props.location, { enter: 'login' }) }>
                <ReactSVG
                  path="/files/images/svg/logo2--white.svg"
                  className="enterPane__logo"
                />
              </Link>
              <div className="enterPane__box">
                <div className="enterPane__header">
                  Login
                </div>
                <Alert color="danger" isOpen={ this.props.data.visible || this.props.data.error.length !== 0 }>
                  { this.props.data.error }
                </Alert>
                <Alert color="success" isOpen={ this.props.data.visible || this.props.data.message.length !== 0 }>
                  { this.props.data.message }
                </Alert>
                <Form onSubmit={ (e) => this.props.onLogin(e) }>
                  <FormGroup>
                    <Input type="email" size="lg"
                        value={ this.props.data.email }
                        onChange={ (e) => this.props.onUpdate('email', e.currentTarget.value) }
                        name="email"
                        id="email"
                        placeholder="Enter your email" />
                  </FormGroup>
                  <FormGroup>
                    <Input type="password" size="lg"
                           value={ this.props.data.password }
                           onChange={ (e) => this.props.onUpdate('password', e.currentTarget.value) }
                           name="password"
                           id="password"
                           placeholder="Enter your password" />
                  </FormGroup>
                  <FormGroup>
                    <ActionButton
                      loading={ this.props.data.loading }>
                      <Button
                          color="success" size="lg"
                          type="submit"
                          block>
                        Log in
                      </Button>
                    </ActionButton>
                  </FormGroup>
                  <FormGroup className="enterPane__formGroupLogin--center">
                    <Link className="enterPane__link"
                      to={ setQueryParam(this.props.location, { enter: 'forgot' }) }>
                      Forgotten password?
                    </Link>
                  </FormGroup>
                </Form>
              </div>
            </div>
          </VelocityTransitionGroup>
        </Col>
      );
    }
  }