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




import { useEffect, useState } from 'react';

const Sign = ({getState, auth, logStatus, user}) => { console.log('auth', auth); 

  const  [logMessage, setLogMessage] = useState(false);
  
  let history = useHistory();

  

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

      if(user.payload && user.payload.sub && user.payload.sub.acl.includes('admin') ) {
        history.push('/admin'); 
      }
    } , [auth]) 


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


   };

  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>

        { logMessage && logStatus == 'RESOLVED' && (auth).length == 0 && <Form.Item wrapperCol={{ offset: 8, span: 16 }}> {console.log('tttt')}
        <Alert
          message="Ошибка"
          description="Неправильно введен логин или пароль"
          type="error"
      
          
         />
        </Form.Item>}

      </Form>
    </Row>
  )
};

const mapStateToProps = state => ({
  auth: state.auth?.token || '',
  logStatus: state.promise.login?.status || '', 
  user: state.auth || '',
 
})

const SignIn = connect(mapStateToProps, {getState:actionFullLogin})(Sign)

export default SignIn;