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 'velocity-animate';
import 'velocity-animate/velocity.ui';
import { VelocityComponent, VelocityTransitionGroup, velocityHelpers } from 'velocity-react';
import ReactSVG                           from 'react-svg'


export class SignupPane 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/logo--white.svg"
                  className="enterPane__logo"
              />
            </Link>
            <div className = "enterPane__box">
              <div className = "enterPane__header">
                Start a free 30-day trial
              </div>
              <Form onSubmit={ (e) => this.props.onSignup(e) }>
                <FormGroup>
                  <Input type="text" size="lg"
                        value={ this.props.data.firstName }
                        onChange={ (e) => this.props.onUpdate('firstName', e.currentTarget.value) }
                        name="firstname"
                        id="firstname"
                        placeholder="Enter your first name" />
                </FormGroup>
                <FormGroup>
                  <Input type="text" size="lg"
                        value={ this.props.data.lastName }
                        onChange={ (e) => this.props.onUpdate('lastName', e.currentTarget.value) }
                        name="lastname"
                        id="lastname"
                        placeholder="Enter your last name" />
                </FormGroup>
                <FormGroup>
                  <Input type="text" size="lg"
                        value={ this.props.data.orgName }
                        onChange={ (e) => this.props.onUpdate('orgName', e.currentTarget.value) }
                        name="companyname"
                        id="companyname"
                        placeholder="Enter your company name" />
                </FormGroup>
                <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 address" />
                </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="Your password" />
                </FormGroup>
                <FormGroup>
                  <Button color="success" size="lg"
                      type="submit"
                      block>
                    Create Account
                  </Button>
                </FormGroup>
              </Form>
            </div>
            <FormGroup className="enterPane__formGroup--center">
              <Link className="enterPane__login"
                    to={ setQueryParam(this.props.location, { enter: 'login' }) }>
                Already have an account? Log in.
              </Link>
            </FormGroup>
          </div>
        </VelocityTransitionGroup>
      </Col>
    );
  }
}