import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { Button, Input, Title, SmallText } from '../../../UI';
import postData from '../../function/postData';
import { useAppDispatch } from '../../../../redux/store';
import { fetchToken } from '../../../../redux/login/asyncActions';
import { LoginParams } from '../../../../redux/login/types';
//{setToken, updateData}

export const Entrance: React.FC = () => {
    const [_data, setData] = useState({login:'',password:''});
    const dispatch = useAppDispatch();
    const [information, setInformation] = useState('');

    const getToken = async () => {    
        dispatch(
          fetchToken({
            login,
            password,
            category,
            search,
            currentPage: String(currentPage),
          }),
        );
    
        window.scrollTo(0, 0);
      };

    const onChange = (name: string, value:string) => {
        setData({ ..._data, [name]: value});
    };

    const reset = (name: string, value:string) => {
        setData({ ..._data, [name]: value});
    };

    const handleEntrance = () => {
        console.log(_data);
        /*postData('/api/login', { _data })
            .then((data) => {
                console.log(data);
                data.token ?
                setToken(data) :
                setInformation(data.error);
        }); */
     }
    return(
        <>
            <Title> Вход в систему </Title>
            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
            <SmallText>{information}</SmallText>
        </>
    )
}


