export const Login: React.FC = () => {
    const navigate = useNavigate();

    const resetForm = () => {
        setUserData({
            username: '',
            password: '',

        });
    }

    const [errors, setErrors] = useState({ username: '', password: '' });

    const [userData, setUserData] = useState<LoginModel>({
        username: '',
        password: '',
    });

    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = event.target;
        setUserData((prevUserData) => ({
            ...prevUserData,
            [name]: value
        }))
    };


    const handleSubmit = async (event: React.FormEvent) => {
        event.preventDefault();

        try {
            const response = await axios.post('http://localhost:8080/login', userData).then((response) => response.data);


            if (response) {
                console.log("Response e ok");
                resetForm();
                navigate('/home');
            } else {
                const errorResponse = response.data;
                console.log(errorResponse);
                setErrors(errorResponse);
            }

        } catch (error) {
            console.log("Some Error");
            resetForm();
        }
    }

    return (
        <div className="login-container container">
            <div className="row login-intro-text"><h3 className="d-flex">Please use your credentials to login</h3></div>
            <hr className="whiteHr" />
            <div className="row container">
                <form id="login-form" onSubmit={handleSubmit}>
                    <div className="form-group col-xs-4 col-md-8 col-lg-6">
                        <label htmlFor="username">Username</label>
                        <input type="text" className="form-control" id="username" name="username" onChange={handleChange} aria-describedby="username" value={userData.username} placeholder="Enter username" />
                        {
                            errors.username && <span style={{ color: 'red', fontSize: '12px' }}>{errors.username}</span>
                        }
                    </div>
                    <div className="form-group col-xs-4 col-md-8 col-lg-6">
                        <label htmlFor="password">Password</label>
                        <input type="password" className="form-control" id="password" name="password" value={userData.password} onChange={handleChange} placeholder="Password" />
                        {
                            errors.password && <span style={{ color: 'red', fontSize: '12px' }}>{errors.password}</span>
                        }
                    </div>
                    <div className="button-container container">
                        <button type="submit" className="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    );
}