import React from "react";
import * as Act from "./interface/Actions";
import usrsvg from "./images/loginuser.svg";
import pswsvg from "./images/loginpas.svg";

export default class SignIn extends React.Component {
    constructor() {
        super();
        this.state = { u: '', p: '', p1: '', p2: '' };
    }

    handleKeyPress(e) {
        if (e.key === 'Enter') {
            this.handleLogin();
        }
    }

    handleLogin() {
        Act.apiCall('login', 'ACCTKN', {
            a: this.props.a, usr: this.state.u, psw: this.state.p,
            p1: this.state.p1, p2: this.state.p2
        });
    }

    render() {
        return (
            <div style={{ display: "flex", justifyContent: "center" }} >
                <div className="flexCol " style={{
                    justifyContent: "center", alignItems: "center",
                    marginTop: "50px", width: "300px", height: "300px",
                    backgroundImage: 'url("signin.png")', backgroundSize: "100%"
                }}>
                    {this.props.a !== -1
                        ? <div>
                            <div className="LognInp">
                                <span><img src={usrsvg} /></span>
                                <input type="text" name="u" placeholder="Username" required="required"
                                    value={this.state.u} onChange={(e) => { this.setState({ u: e.target.value }) }} />
                            </div>
                            <div className="LognInp">
                                <span><img src={pswsvg} /></span>
                                <input type="password" name="p1" placeholder="Password" required="required"
                                    key={this.props.a} value={this.state.p}
                                    onKeyPress={this.handleKeyPress.bind(this)}
                                    onChange={(e) => { this.setState({ p: e.target.value }) }} />
                            </div>
                        </div>
                        :
                        <div>
                            <div className="LognInp">
                                <span><img src={pswsvg} /></span>
                                <input type="password" name="p1" placeholder="New Password" required="required"
                                    value={this.state.p1} onChange={(e) => { this.setState({ p1: e.target.value }) }} />
                            </div>
                            <div className="LognInp">
                                <span><img src={pswsvg} /></span>
                                <input type="password" name="p2" placeholder="Reenter Password" required="required"
                                    value={this.state.p2}
                                    onChange={(e) => { this.setState({ p2: e.target.value }) }} />
                            </div>
                        </div>
                    }
                    <div className="LognInp" style={{ justifyContent: "flex-end" }}>
                        <input type="submit" value="enter"
                            onClick={this.handleLogin.bind(this)} style={{ width: "145px" }} />
                    </div>
                    <div style={{ fontFamily: "Roboto", fontSize: "13px", color: "#ff073a" }}>
                        {this.props.msg}
                    </div>
                </div>
            </div>
        );
    }
}