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 ResetPane 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">
                  Set new password
                </div>
                <Alert color="danger" isOpen={ this.props.data.error.length !== 0 }>
                  { this.props.data.error }
                </Alert>
                <Alert color="success" isOpen={ this.props.data.message.length !== 0 }>
                  { this.props.data.message }
                </Alert>
                <Form onSubmit={ (e) => this.props.onReset(e) }>
                  <FormGroup>
                    <Input type="password"
                        value={ this.props.data.password }
                        onChange={ (e) => this.props.onUpdate('password', e.currentTarget.value) }
                        name="password"
                        id="password"
                        placeholder="Set new password" />
                  </FormGroup>
                  <FormGroup>
                    <ActionButton
                      loading={ this.props.data.loading }>
                      <Button color="success" size="lg"
                          type="submit"
                          block>
                        Reset password
                      </Button>
                    </ActionButton>
                  </FormGroup>
                </Form>
              </div>
            </div>
          </VelocityTransitionGroup>
        </Col>
      );
    }
  }