import {Link, useNavigate} from "react-router-dom";
import styles from './RegisterForm.module.css';
import {useRef, useState} from 'react';
import {registerUser} from "../../api/AuthApi.ts";

const RegisterForm = () => {
    const [focused, setFocused] = useState({
        firstName: false,
        lastName: false,
        email: false,
        password: false
    });

    const [error, setError] = useState<string | null>(null);

    const nameRef = useRef<HTMLInputElement>(null);
    const surnameRef = useRef<HTMLInputElement>(null);
    const emailRef = useRef<HTMLInputElement>(null);
    const passwordRef = useRef<HTMLInputElement>(null);

    const navigate = useNavigate();

    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        const firstName = nameRef.current?.value ?? '';
        const lastName = surnameRef.current?.value ?? '';
        const email = emailRef.current?.value ?? '';
        const password = passwordRef.current?.value ?? '';
        const username = firstName + lastName || '';

        setError(null);

        try{
            if (email === '' || password === '' || firstName === '' || lastName === '') {
                setError('Заполните все поля');
            }
            else{
                const responseData = await registerUser({username, firstName, lastName, email, password});
                if (responseData && !responseData.error) {
                    console.log('Регистрация успешна');
                    localStorage.setItem("user", JSON.stringify(responseData.user));
                    navigate('/my-surveys', {replace: true});
                }
                else if (responseData.status === 409){
                    setError('Аккаунт с такой почтой уже зарегистрирован');
                }
            }
        }
        catch (err) {
            if (err instanceof Error) {
                if (err.message.includes('409')) {
                    setError('Аккаунт с такой почтой уже зарегистрирован');
                } else {
                    setError('Произошла ошибка при регистрации');
                }
            } else {
                setError('Неизвестная ошибка');
            }
        }
    }

    const handleEmailChange = () => {
        if (error) {
            setError(null);
        }
    };

    return (
        <div className={styles.registerContainer}>
            <h2 className={styles.title}>Регистрация</h2>
            <form className={styles.form} onSubmit={handleSubmit}>
                <input
                    className={`${styles.input} ${styles.name}`}
                    type={'text'}
                    placeholder='Имя'
                    ref={nameRef}
                    onFocus={() => setFocused({ ...focused, firstName: true })}
                    onBlur={() => setFocused({ ...focused, firstName: false })}
                    style={{ color: focused.firstName ? 'black' : 'inherit' }}
                />
                <input
                    className={`${styles.input} ${styles.surname}`}
                    type={'text'}
                    placeholder='Фамилия'
                    ref={surnameRef}
                    onFocus={() => setFocused({ ...focused, lastName: true })}
                    onBlur={() => setFocused({ ...focused, lastName: false })}
                    style={{ color: focused.lastName ? 'black' : 'inherit' }}
                />
                <div className={styles.emailContainer}>
                    <input
                        className={`${styles.input} ${styles.email} ${error ? styles.error : ''}`}
                        type={'email'}
                        placeholder='Почта'
                        ref={emailRef}
                        onChange={handleEmailChange}
                        onFocus={() => setFocused({ ...focused, email: true })}
                        onBlur={() => setFocused({ ...focused, email: false })}
                        style={{ color: focused.email ? 'black' : 'inherit' }}
                    />
                    {error && <p className={styles.errorMessage}>{error}</p>}
                </div>
                <input
                    className={`${styles.input} ${styles.password}`}
                    type='password'
                    placeholder='Пароль'
                    ref={passwordRef}
                    onFocus={() => setFocused({ ...focused, password: true })}
                    onBlur={() => setFocused({ ...focused, password: false })}
                    style={{ color: focused.password ? 'black' : 'inherit' }}
                />
                <button className={styles.signUp} type='submit'>Зарегистрироваться</button>
            </form>
            <p className={styles.recommendation}>Уже с нами?
                <Link className={styles.recommendationLink} to='/login'>Войдите!</Link>
            </p>
        </div>
    );
}

export default RegisterForm;