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>
    );
  }
}