import React, {Component} from 'react';
import {Button, Form, Grid, Header, Image, Icon, Message} from 'semantic-ui-react';
import { call } from '../client_server';
import { Redirect } from "react-router-dom";


export default class ChangePass  extends Component {
    constructor(props) {
        super(props);
        this.state = {
            password: "",
            error: {
                state: false,
                message: "",
            }
        }
        this.handleChangePassword = this.handleChangePassword.bind(this);
    }

    onChangeHandler = (event) => {
        let nam = event.target.name;
        let val = event.target.value;
        this.setState({[nam]: val});
    };

    checkpassword = (e) => {
        if (e.target.value !== this.state.password) {
          this.setState({error: {
            state : true,
            message : "Passwords do not match.",
          }});
        }
    };

    handleChangePassword = (e) => {
      const params = {
        "confirmationToken" : this.props.query.token ,
        "password" : this.state.password
      }
      call.resetPassword(params)
        .then(res => {
          if (res.status !== 200){
            this.setState({ error: { state: true,
                            message: "Errore"}});
          } else {
            return <Redirect to="/" />
          }
          // else set a message that an email has been sent
        }).catch(err => {
          console.log(err);
        });
    };

    render() {
        return (
          <React.Fragment>
            <Button
              circular
              style={{margin: "2em"}}
              href="/"
            >
              <Icon name='arrow alternate circle left'/>
              Go Home </Button>
            <Grid textAlign='center' style={{height: '70vh'}} verticalAlign='middle'>
              <Grid.Column style={{maxWidth: 450}}>
                <Header as='h2' color='blue' textAlign='center'>
                  <Image src='img/logo.png'/> Reset Password
                </Header>
                <Form size='large' style={{marginTop : "2em"}} error={this.state.error.state}>
                    <Message
                      error
                      header='Change Password Error'
                      content= {this.state.error.message}
                    />
                    <Form.Input
                        icon='address card outline'
                        iconPosition='left'
                        placeholder='Reset your password'
                        name="password"
                        type='password'
                        onChange={this.onChangeHandler}
                        required
                    /> 
                    <Form.Input
                        icon='address card outline'
                        iconPosition='left'
                        placeholder='Confirm Password'
                        name="confirm-password"
                        type='password'
                        onChange={this.checkpassword}
                        required
                    /> 
                    <Button  color='blue' fluid size='large' onClick={this.handleChangePassword}>
                        Confirm password
                    </Button>
                </Form>
              </Grid.Column>
            </Grid>
          </React.Fragment>
        )
      }
}