import { Form, Input, Button, Checkbox, Row, Col, Alert } from 'antd';
import { connect } from 'react-redux';
import { actionFullRegister} from '../action';
import {Router, Route, Link, Redirect, Switch, useHistory} from 'react-router-dom';




import { useEffect, useState } from 'react';

const Register = ({getState, auth}) => { console.log('auth', auth); 

  const  [regMessage, setRegMessage] = useState(false);
  
  let history = useHistory();

  

  useEffect(
    () => {
      
      if((auth).length !== 0) { 
        history.push('/')
      } 
    } , [auth]) 


  const onFinish = (values) => {
    console.log('Success:', values);
    getState(values.username, values.password);
  
    setRegMessage(!regMessage);
    


   };

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

  return (

    <Row> 
      <Col span ={7}>

     </Col>
      <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
       >
      <Form.Item
        label="Имя"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Пароль"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            Войти
          </Button>
        </Form.Item>

        { regMessage && (auth).length == 0 && <Form.Item wrapperCol={{ offset: 8, span: 16 }}> {console.log('куп')}
        <Alert
          message="Ошибка"
          description="Такой пользователь существует"
          type="error"
      
          
         />
        </Form.Item>}

      </Form>
    </Row>
  )
};

const mapStateToProps = state => ({
  auth: state.auth?.token || '',
 
})

const RegisterIn = connect(mapStateToProps, {getState: actionFullRegister})(Register)

export default RegisterIn;