import React, { useState } from 'react';
import { Input } from '@progress/kendo-react-inputs';
import { Label } from '@progress/kendo-react-labels';
import { Button } from '@progress/kendo-react-buttons';
import { Link } from 'react-router-dom';
import { Notification, NotificationGroup } from '@progress/kendo-react-notification';

const LoginComponent = ({ onLogin }) => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');

    const handleSubmit = (event) => {
        event.preventDefault();

        const mockUsername = import.meta.env.VITE_MOCK_USERNAME;
        const mockPassword = import.meta.env.VITE_MOCK_PASSWORD;

        if (username === mockUsername && password === mockPassword) {
            onLogin(true);
        } else {
            console.error("Invalid username or password");
            setError("Invalid username or password. Please try again.");
            setTimeout(() => {
                setError('');
            }, 50000);
        }
    };

    return (
        <>
            <form onSubmit={handleSubmit}>
                <div>
                    <Label htmlFor="username">Username: </Label>
                    <Input style={{ border: '1px solid #edbd7d' }} type="text" id="username" value={username} onChange={(e) => setUsername(e.target.value)} autoComplete="username" />
                </div>
                <div>
                    <Label htmlFor="password">Password: </Label>
                    <Input style={{ border: '1px solid #edbd7d', marginBottom: '10px' }} type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" />
                </div>
                
                <Button look="flat" type="submit" style={{ padding: '0 20px' }}>Login</Button>
                <div>
                    <NotificationGroup style={{ textAlign: 'center' }}>
                    {error && (<Notification type={{ style: 'error', icon: true }} closeable={true} onClose={() => setError('')}>
                        <span>{error}</span>
                        </Notification> )}
                    </NotificationGroup>
                </div>
            </form>
        </>
    );
};

export default LoginComponent;