import React, {Component} from "react";
import { Container, Row, Col,Button, Input  } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faRocket } from '@fortawesome/free-solid-svg-icons';
import { Redirect } from 'react-router-dom';
import logoLine from "../../logos/logo-line-white.svg";

class Home extends Component {

    constructor(props) {
        super(props);
        this.state = {
            title:null,
            redirect:false,
        };
        this.focusInput= React.createRef();
    }

    handleSubmit = (event) => {
        event.preventDefault();
        this.setState({redirect: true});
    };

    handleChangeTitle= (event) => {
            this.setState({title: event.target.value});
    };

    render(){
        const redirect = this.state.redirect;

        if (redirect) {
            return <Redirect to={ '/create-election/?title='+encodeURIComponent(this.state.title)} />;
        }
        return(
            <Container>
                <form onSubmit={this.handleSubmit} autoComplete="off">
                    <Row>
                        <img src={logoLine} alt="logo" height="128" className="d-block ml-auto mr-auto mb-4"/>
                    </Row>
                    <Row>
                        <Col className="text-center"><h3>Simple et gratuit : organisez un vote à l'aide du Jugement Majoritaire.</h3></Col>
                    </Row>
                    <Row className="mt-2">
                        <Col xs="12" md="9" xl="6" className="offset-xl-2">
                                <Input placeholder="Saisissez ici la question de votre vote"  innerRef={this.focusInput} autoFocus required className="mt-2" name="title" value={this.state.title?this.state.title:""} onChange={this.handleChangeTitle} maxLength="250" />
                        </Col>
                        <Col xs="12" md="3" xl="2">
                            <Button type="submit" className="btn btn-block btn-secondary mt-2" ><FontAwesomeIcon icon={faRocket} className="mr-2"/>Lancer</Button>
                        </Col>
                    </Row>
                    <Row className="mt-4">
                        <Col className="text-center"><p>Pas de publicité et pas de cookie publicitaire.</p></Col>
                    </Row>
                </form>
            </Container>
        )
    };
}
export default Home;