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

const CreatePlayer = ({ showCreatePlayerForm, setShowCreatePlayerForm, setAlertType, setAlertMessage, setShowAlert }) => {

    const handleClose = () => {
        setPlayerData(() => ({
            name: "",
            birthDate: "",
            nation: "",
            dressNumber: "",
            height: "",
            weight: "",
            position: "GOALMAN",
        }));
        setShowCreatePlayerForm(false);
    };

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

    const [playerData, setPlayerData] = useState({
        name: "",
        birthDate: "",
        nation: "",
        dressNumber: "",
        height: "",
        weight: "",
        position: "GOALMAN",
    });

    const handleNameInputChange = (e) => {
        setPlayerData((values) => ({
            ...values,
            name: e.target.value
        }));
    };

    const handleBirthDateInputChange = (e) => {
        setPlayerData((values) => ({
            ...values,
            birthDate: e.target.value
        }));
    };

    const handleNationInputChange = (e) => {
        setPlayerData((values) => ({
            ...values,
            nation: e.target.value
        }));
    };

    const handleDressNumberInputChange = (e) => {
        setPlayerData((values) => ({
            ...values,
            dressNumber: e.target.value
        }));
    };

    const handleHeightInputChange = (e) => {
        setPlayerData((values) => ({
            ...values,
            height: e.target.value
        }));
    };

    const handleWeightInputChange = (e) => {
        setPlayerData((values) => ({
            ...values,
            weight: e.target.value
        }));
    };

    const handlePositionInputChange = (e) => {
        setPlayerData((values) => ({
            ...values,
            position: e.target.value
        }));
    };

    const createPlayer = () => {
        const json = JSON.stringify({
            name: playerData.name,
            birthDate: playerData.birthDate,
            dressNumber: playerData.dressNumber,
            height: playerData.height,
            weight: playerData.weight,
            position: playerData.position,
            state: "INACTIVE",
            nation: "GRENADA"
        });

        axios.post('http://localhost:8080/pa165/players', json, {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + localStorage.getItem("token")
            }
        })
            .then(function (response) { })
            .catch(function (error) {
                setAlertType(1);
                setAlertMessage("Couldnt update player!");
                setShowAlert(true);
            });
    }

    const handleCreate = () => {
        let birthDate = new Date(playerData.birthDate);

        if (playerData.name === "") {
            setAlertType(1);
            setAlertMessage("Name is required!")
            setShowAlert(true);
        }
        else if (birthDate > Date.now() || birthDate.toString() === "Invalid Date") {
            setAlertType(1);
            setAlertMessage("Birth date must be a past date!")
            setShowAlert(true);
        }
        else if (playerData.height === "") {
            setAlertType(1);
            setAlertMessage("Height is required!")
            setShowAlert(true);
        }
        else if (playerData.dressNumber === "") {
            setAlertType(1);
            setAlertMessage("Dress number is required!")
            setShowAlert(true);
        }
        else if (playerData.weight === "") {
            setAlertType(1);
            setAlertMessage("Weight is required!")
            setShowAlert(true);
        }
        else {
            createPlayer();
            handleClose();
        }
    };

    return (
        <>
            <Modal show={showCreatePlayerForm} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>New player</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form>
                        <Form.Group className="mb-3" controlId="Player.Name">
                            <Form.Label>Player name</Form.Label>
                            <Form.Control
                                type="text"
                                placeholder="Player name"
                                value={playerData.name}
                                onChange={handleNameInputChange}
                                autoFocus
                            />
                        </Form.Group>
                        <Form.Group className="mb-3" controlId="Player.Name">
                            <Form.Label>Position</Form.Label>
                            <Form.Select onChange={handlePositionInputChange} defaultValue={"GOALMAN"}>
                                <option>GOALMAN</option>
                                <option>DEFENDER</option>
                                <option>MIDFIELDER</option>
                                <option>FORWARD</option>
                            </Form.Select>
                        </Form.Group>
                        <Form.Group className="mb-3" controlId="Player.StartDate">
                            <Form.Label>Birth date</Form.Label>
                            <Form.Control
                                type="date"
                                value={playerData.birthDate}
                                onChange={handleBirthDateInputChange}
                            />
                        </Form.Group>
                        <Form.Group className="mb-3" controlId="Player.EndDate">
                            <Form.Label>Dress number</Form.Label>
                            <Form.Control
                                type="number"
                                value={playerData.dressNumber}
                                onChange={handleDressNumberInputChange}
                            />
                        </Form.Group>
                        <Form.Group className="mb-3" controlId="Player.EndDate">
                            <Form.Label>Height</Form.Label>
                            <Form.Control
                                type="number"
                                value={playerData.height}
                                onChange={handleHeightInputChange}
                            />
                        </Form.Group>
                        <Form.Group className="mb-3" controlId="Player.EndDate">
                            <Form.Label>Weight</Form.Label>
                            <Form.Control
                                type="number"
                                value={playerData.weight}
                                onChange={handleWeightInputChange}
                            />
                        </Form.Group>
                    </Form>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        Close
                    </Button>
                    <Button variant="primary" onClick={handleCreate}>
                        Create
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    );
}

export default CreatePlayer;