import { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import Header from './Header';

const Registration = () => {
    const navigate = useNavigate();
    const [username, setuserName] = useState('');
    const [display_name, setdisplayName] = useState('');
    const [password, setPassword] = useState('');
    const [password_confirm, setPassword_confirm] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    
    // Добавление пользователя
    const addUser = async (e) => {
        e.preventDefault();   
        setLoading(true);
        setError(null);
        try {
            const newUser = { username, display_name, password, password_confirm};
            await axios.post('/api/users/register', newUser);
            alert('Регистрация успешна! Перейдите на страницу входа.');
            navigate('/login');
            setuserName('');
            setPassword('');
            setPassword_confirm('');
        } catch (err) {
            setError(err.response.data.detail || 'Пароль должен иметь длинну от 8 до 16 символов, содержать заглавные и строчные буквы, цифры и спец символ(_-?.!@\'`)');
        } finally {
            setLoading(false);
        }
    };     
	
    const handleLoginClick = () => {
        navigate('/login'); // Переход к входу
    };
    
    return (
        <><Header />
		<div className="login-page">
      		<h2>Регистрация</h2>
			{
                error && <div className="error">{error}</div>
            }
      		<form onSubmit={addUser}>
        		<div>
                  	<label>Логин:</label>
                  	<input
                        type="text"
                        value={username}
                        onChange={(e) => setuserName(e.target.value)}
                        required
          			/>
        		</div>
				<div>
                  	<label>Никнейм:</label>
                  	<input
                        type="text"
                        value={display_name}
                        onChange={(e) => setdisplayName(e.target.value)}
          			/>
        		</div>
        		<div>
          			<label>Пароль:</label>
					<input
                        type="password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        required
                    />
        		</div>
				<div>
          			<label>Подтверждение пароля:</label>
					<input
                        type="password"
                        value={password_confirm}
                        onChange={(e) => setPassword_confirm(e.target.value)}
                        required
                    />
        		</div>
        		<button type="submit" disabled={loading}>
                    {loading ? 'Регистрация...' : 'Зарегистрироваться'}
                </button>
      		</form>
			<button onClick={handleLoginClick}>
                Уже есть аккаунт? Войти
			</button>
    	</div></>
	);
}

export default Registration;