import React, {Component} from 'react';
import {Switch, Route} from 'react-router-dom';
import Particles from 'react-particles-js';
import {BrowserRouter} from 'react-router-dom';
import logoDefault from '../../svg/logoDefault.svg';
import {
    Row,
    Card,
    CardImg,
    CardText,
    CardBody,
    Container,
    Col,
    CardTitle
} from 'reactstrap';
import './login.css';
import {APPLICATION_NAME} from '../../config';
import LogInForm from './LogInForm.jsx';
import ChangePasswordContainer from './ChangePasswordContainer.jsx';
import {loginTexts} from '../../constants/authConstants';

const paramsForParticles = {
    particles: {
        number: {
            value: 110,
            density: {
                enable: true,
                value_area: 2500
            }
        },
        line_linked: {
            enable: true,
            distance: 300,
            color: "#ffffff",
            opacity: 1.5,
            width: 3
        },
        "shape": {
            "type": "circle",
            "stroke": {
                "width": 10,
                "height": 100,
                "color": "white"
            },
            polygon: {
                nb_sides: 6
            }
        }
    }
}

class LogInContainer extends Component {

    render() {
        return (
        <BrowserRouter>
        <Container fluid={true} className="main-col">

        <Col  className="background-allPage" >
            <Col className="background-left"></Col>
            <Col className="background-right">
                <Particles className="particles background-right w3-display-topright" params={paramsForParticles}/>
            </Col>
            <Row className="form-login">
                <Col md={{ size: 4, offset: 2 }} xs="12" sm="12" className="login-intro">
                    <Card className="border-card-color">
                        <CardImg className="icon-logo-v2" src={logoDefault} alt="Wiaas logo"/>
                        <CardBody className="introduction">
                            <CardTitle className="welcome-to-WIAAS">
                                <span >{loginTexts.labels.WELCOME_TO}</span>{' '}
                                <span className="text-style-1">{APPLICATION_NAME}</span>
                            </CardTitle>
                            <CardText className="welcome-text"></CardText>
                        </CardBody>
                    </Card>
                    <hr className="divider login-separator"/>
                </Col>
                <Col md="3" xs="12" sm="12" className="form-BG">
                    <Switch>
                        <Route exact path='/changePassword/:token' component={ChangePasswordContainer} />
                        <Route path='/' component={LogInForm} />
                    </Switch>
                </Col>
            </Row>
        </Col>
        </Container>
    </BrowserRouter>);
    }
}

export default LogInContainer;
