import {useState} from 'react'
import {Link} from 'react-router-dom'
import './InputForm.css';
import {registerUser} from '../services/PhpApi';
import { PasswordInput, Stack, TextInput } from '@mantine/core';
import { CheckCircledIcon, CrossCircledIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
import { showNotification } from '@mantine/notifications';

const Register = () => 
{
    const [formData, setFormData] = useState({
        email:'',
        password:'',
        password2:''
    });

    const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
        setFormData({
            ...formData,
            [e.currentTarget.name]:e.currentTarget.value
        })
    }

    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => 
    {
        e.preventDefault();

        if(!Object.values(formData).every(val => val.trim() !== ''))
        {
            showNotification(
                {
                    icon: <div style=
                    {
                        {
                            transform: "translate(0px, -2px) scale(1.5)"
                        }
                    }>
                    <ExclamationTriangleIcon/></div>,
                    color: 'orange',
                    message: 'Bitte alle Felder ausfüllen!'
                });

            return;
        }

        if(formData.password !== formData.password2)
        {
            showNotification(
                {
                    icon: <div style=
                    {
                        {
                            transform: "translate(0px, -2px) scale(1.5)"
                        }
                    }>
                    <ExclamationTriangleIcon/></div>,
                    color: 'orange',
                    message: 'Bitte 2mal das gleiche Passwort eingeben!'
                });
            return;
        }

        const data = await registerUser(formData);
        if(data.success)
        {
            showNotification(
                {
                    icon: <div style=
                    {
                        {
                            transform: "translate(0px, -2px) scale(2.2)"
                        }
                    }>
                    <CheckCircledIcon/></div>,
                    color: 'green',
                    message: 'Erfolgreich Registriert!'
                });
            e.currentTarget.reset();
        }
        else if(!data.success && data.message)
        {
            showNotification(
                {
                    icon: <div style=
                    {
                        {
                            transform: "translate(0px, -2px) scale(2.2)"
                        }
                    }>
                    <CrossCircledIcon/></div>,
                    color: 'red',
                    message: data.message
                });
        }
    }

    return ( 
        <div className='InputForm'>
            <h2>Register</h2>
            <div className='frameCenter'>
            <div className='frame'>
            <form onSubmit={submitForm}>
            <Stack align="flex-start" sx={{textAlign: 'left'}}>
                <TextInput
                    label = 'Email:'
                    type="email" 
                    name="email" 
                    onChange={onChangeInput} 
                    placeholder="Deine Email" 
                    id="email" 
                    value={formData.email} 
                    required />
                <PasswordInput 
                    sx = {{  maxWidth: '80vw', minWidth: '30vw', width: '300px' }}
                    label = 'Passwort:'
                    name="password" 
                    onChange={onChangeInput} 
                    placeholder="Passwort" 
                    id="password" value={formData.password} 
                    required/>
                <PasswordInput 
                    sx = {{  maxWidth: '80vw', minWidth: '30vw', width: '300px' }}
                    label = 'Passwort:'
                    name="password2" 
                    onChange={onChangeInput} 
                    placeholder="Passwort bestätigen" 
                    id="password2" value={formData.password2} 
                    required/>
                </Stack>
                <button type="submit" >Register</button>
                <div className="bottom-link"><Link to="/login">Login</Link></div>
            </form>
            </div>
            </div>
        </div>
    )
}
export default Register;