import React, { useState, useEffect } from "react";
import { Form, Input, Button } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import {  Link } from "react-router-dom";

import { doLogin } from "../actions/authActions";
import { connect } from "react-redux";


// import {getGQL} from "../utils/getGQL";
import "../styles/RegisterForm.css";

// import { BrowserRouter as Router, Route } from 'react-router-dom';




const LoginForm = ({  history, doLogin, regUser, isLoggedIn, state }) => {
  // const history = useHistory();
  const [form] = Form.useForm();
  const [login, setLogin] = useState("");
  const [password, setPassword] = useState("");

  // console.log(state)


  useEffect(() => {
    isLoggedIn && history.push("/private");
  }, [isLoggedIn]);

  const onFinish = (values) => {
    // console.log("Success:", values);
  };

  const onFinishFailed = (errorInfo) => {
    // console.log("Failed:", errorInfo);
  };

  // let p = getGQL('http://player.asmer.fs.a-level.com.ua/graphql')(
  //   let p = getGQL('/graphql')(
  //     `query Login{
  //     login(login: "${login}", password: "${password}")
  //     }`
  //   ).then((data) =>
  //     console.log(data)
  // )

  // store.dispatch(actionPending())
  // p.then(data => store.dispatch(actionResolved(data)))

  /////////////////////////////////////////////////////////////////////////

  function onLogin() {
    doLogin && doLogin(login, password);
    // console.log(login);
  }

  // function onLogOut() {
  //   regUser && regUser();
  //   doLogin && doLogin(login, password);
  //   // history.push("/registration");
  // }

  return (
    <div className="registerForm">
      <div>
        <Form
          name="basic"
          form={form}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="Username"
            name="username"
            value={onLogin}
            onChange={(e) => setLogin(e.target.value)}
            rules={[
              {
                required: true,
                message: "Please input your username!",
              },
            ]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              onChange={(e) => {
                form.setFieldsValue({ username: e.target.value });
              }}
            />
          </Form.Item>

          <Form.Item
            label="Password"
            name="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            rules={[
              {
                required: true,
                message: "Please input your password!",
              },
            ]}
          >
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
            />
          </Form.Item>


          <Form.Item>
            <Button 
            type="primary" 
            htmlType="submit"
            disabled={!login || !password}
            onClick={()=> onLogin(login, password) }
            >
              Submit
            </Button>
            <Link to="/registration" className="link-approval" 
            >Registration</Link>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

const mapStateToProps = (state) => ({
  isLoggedIn: !!state.auth.token,
});

const mapDispatchToProps = (dispatch) => ({
  doLogin: (login, password) => dispatch(doLogin(login, password)),
});

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

