import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';



const Entrance = ({setToken, updateData}) => {
    const [_data, setData] = useState({login:'',password:''});
    const [information, setInformation] = useState('');

    interface Props_data {
        name: string;
        value: string;
        onClick: () => void;
      }

    const update_Data: React.FC<Props_data> = ({name, value}) => {
        setData({ ..._data, [e.target.name]: e.target.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={update_Data(e)} value={_data.login}/>
            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
            <Button onClick={handleEntrance} align={''} styles={''}>Войти</Button>
            <SmallText>{information}</SmallText>
            <LinkButton onClick={() => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
        </>
    )
}

Entrance.propTypes = {
    setToken: PropTypes.func.isRequired
  }

export default Entrance;