import React, { useState, useRef, } from "react";
import { connect } from "react-redux";
// import { actionLogin } from "../Actions";
// import history from "../history";
import { actionLogin, store } from "../Reduser";
import { Container, FormControl, Nav, Navbar, Form, Button } from 'react-bootstrap';
const LoginForm = ({ onLogin = null, isLoggedIn, mode = "Login" }) => {
    const [login, setLogin] = useState("");
    const [pass, setPass] = useState("");
    const [nick, setNick] = useState("");
    const input_ref = useRef(null);
    const pass_ref = useRef(null);
    const nick_ref = useRef(null);
    const btn_ref = useRef(null);








    return (
        <>
            <Container style={{ width: "500px" }}>
                <h1 className="text-center">
                    Your accaunt
                </h1>
                <Form>
                    <Form.Label> Login</Form.Label>
                    <Form.Control
                        type="login"

                        placeholder="Enter login"

                        ref={input_ref}
                        readOnly={isLoggedIn}



                        onChange={(e) => {
                            setLogin(e.target.value);
                        }} />
                    <Form.Group controlId="formBasicPassword">
                        <Form.Label> Password</Form.Label>
                        <Form.Control
                            type="password"
                            placeholder="Enter password"
                            ref={pass_ref}
                            readOnly={isLoggedIn}

                            onChange={(e) => {
                                setPass(e.target.value)
                            }
                            } />

                    </Form.Group>
                    <Form.Group controlId="formBasicPassword">
                        <Form.Label> Confirm Password</Form.Label>
                        <Form.Control
                            type="password"
                            placeholder="Confirm password"

                            ref={pass_ref}
                            readOnly={isLoggedIn}
                            type="password"

                            onChange={(e) => {
                                setPass(e.target.value);
                            }} />
                    </Form.Group>
                    <Button 
                    variant="secondary" 
                    type="submit" 
                    ref={btn_ref}
                    onClick={() => {
                        onLogin(login, pass);
                        console.log("кнопка лагин нажата");
                    }}
                    disabled={isLoggedIn || !login || !pass || (mode !== "Login" && !nick)} 
                    > {mode} </Button>
















                </Form>
            </Container>
            {/* <input
                ref={pass_ref}
                readOnly={isLoggedIn}
                type="password"
                placeholder="Password"
                onChange={(e) => {
                    setPass(e.target.value);
                }}
            ></input> */}

            {/* <button
                ref={btn_ref}
                onClick={() => {
                    onLogin(login, pass);
                    console.log("кнопка лагин нажата");
                }}
                disabled={isLoggedIn || !login || !pass || (mode !== "Login" && !nick)}
            >
                {mode}
            </button> */}
        </>
    );
};

const CLoginForm = connect((s) => ({ isLoggedIn: s.auth.login, mode: "Login" }), { onLogin: actionLogin })(LoginForm);

export const Login = () => {
    return (
        <>
            <div>PageLogin</div>
            <CLoginForm />
        </>
    );
};