import './css/loginform.css';
import React, { useState } from 'react';
import { Modal, Form, Button, } from 'react-bootstrap';

const RegisterForm = ({ showRegisterForm, setShowRegisterForm, setShowLoginForm, setAlertType, setAlertMessage, setShowAlert }) => {
    const handleClose = () => {
        setShowRegisterForm(false);
        setNewUserData(() => ({
            email: "",
            nickname: "",
            password: "",
        }));
    };

    const handleShow = () => setShowRegisterForm(true);

    const [newUserData, setNewUserData] = useState({
        email: "",
        nickname: "",
        password: "",
    });

    const handleShowLogin = () => {
        setShowRegisterForm(false);
        setShowLoginForm(true);
    };

    const handleEmailInputChange = (e) => {
        setNewUserData((values) => ({
            ...values,
            email: e.target.value
        }));
    };

    const handleNicknameInputChange = (e) => {
        setNewUserData((values) => ({
            ...values,
            nickname: e.target.value
        }));
    };

    const handlePasswordInputChange = (e) => {
        setNewUserData((values) => ({
            ...values,
            password: e.target.value
        }));
    };

    const handleRegistration = () => {
        const validateEmail = new RegExp('^.+@.+\\....?$');

        if (newUserData.nickname === "") {
            setAlertType(1);
            setAlertMessage("Nickname is required!")
            setShowAlert(true);
        }
        else if (!validateEmail.test(newUserData.email)) {
            setAlertType(1);
            setAlertMessage("Wrong email format!")
            setShowAlert(true);
        }
        else if (newUserData.password === "") {
            setAlertType(1);
            setAlertMessage("Password is required!")
            setShowAlert(true);
        }
        else {
            handleClose();
        }
    };

    return (
        <>
            <Modal show={showRegisterForm} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>Registration</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form>
                        <Form.Group className="mb-3" controlId="RegistrationForm.Nickname">
                            <Form.Label>Nickname</Form.Label>
                            <Form.Control
                                type="text"
                                placeholder="Nickname"
                                value={newUserData.nickname}
                                onChange={handleNicknameInputChange}
                                disabled
                                autoFocus
                            />
                        </Form.Group>
                        <Form.Group className="mb-3" controlId="RegistrationForm.Email">
                            <Form.Label>Email address</Form.Label>
                            <Form.Control
                                type="email"
                                placeholder="name@example.com"
                                value={newUserData.email}
                                disabled
                                onChange={handleEmailInputChange}
                            />
                        </Form.Group>
                        <Form.Group className="mb-3" controlId="RegistrationForm.Password">
                            <Form.Label>Password</Form.Label>
                            <Form.Control
                                type="password"
                                placeholder="Password"
                                value={newUserData.password}
                                disabled
                                onChange={handlePasswordInputChange}
                            />
                        </Form.Group>
                    </Form>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        Close
                    </Button>
                    <Button variant="secondary" onClick={handleShowLogin}>
                        Log in
                    </Button>
                    <Button variant="primary" onClick={handleRegistration}>
                        Register
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    );
}

export default RegisterForm;