import toast, { Toaster } from 'react-hot-toast';
import React from 'react';
import '../css/Register.css';

function Register() {
    async function sendData(event) {
        event.preventDefault();
        const username = event.target![0].value;
        const password = event.target![1].value;
        const passwordConfirm = event.target![2].value;
        if (!username) {
            toast("Необходимо указать имя пользователя!", {icon: '⚠️'});
            return;
        }
        if (!password) {
            toast("Необходимо придумать пароль!", {icon: '⚠️'});
            return;
        }
        if (password != passwordConfirm) {
            toast("Пароли не совпадают!", { icon: '⚠️' });
            return;
        }
        const response = await fetch('/api/v1/user/register', {
            method: 'POST',
            body: JSON.stringify({
                username,
                password
            }),
            headers: {
                "Content-Type": "application/json"
            }
        });
        switch (response.status) {
            case 409:
                toast("Такой пользователь уже существует!", {icon: '❌️'});
                break;
            case 200:
                document.location.href = "/";
                break;
        }
    }

    function goToRegisterPage() {
        window.location.href = "/login"
    }

    return (
        <div className='container'>
            <h1>
                Регистрация
            </h1>
            <iframe style={{ display: "none" }}></iframe>
            <form onSubmit={sendData}>
                <input className="beautiful_input" id='login' name='login' type='text' placeholder='Имя пользователя'></input>
                <input className="beautiful_input" id='password' name='password' type='password' placeholder='Пароль'></input>
                <input className="beautiful_input" id='passwordConfirm' name='passwordConfirm' type='password' placeholder='Повтор пароля'></input>
                <button type="submit" >Зарегистрироваться</button>
            </form>
            <button style={{marginTop: "25px"}} onClick={goToRegisterPage}>Уже есть аккаунт</button>
            <Toaster />
        </div>
    );
}

export default Register;