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

const ModifyPlayer = ({ showModifyPlayerForm, setShowModifyPlayerForm, setAlertType, setAlertMessage, setShowAlert, player = null, setPlayer, setData }) => {

    const handleClose = () => {
        setShowModifyPlayerForm(false);
    };

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

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

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

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

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

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

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

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

    const ModifyPlayer = () => {
        const json = JSON.stringify({
            id: player.id,
            dressNumber: player.dressNumber,
            name: player.name,
            height: player.height,
            weight: player.weight,
            team: player.team,
            position: player.position,
            state: player.state
        });

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

    const handleUpdate = () => {
        let birthDate = new Date(player.birthDate);

        if (player.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 (player.dressNumber === "") {
            setAlertType(1);
            setAlertMessage("Dress number is required!");
            setShowAlert(true);
        }
        else if (player.height === "") {
            setAlertType(1);
            setAlertMessage("Height is required!")
            setShowAlert(true);
        }
        else if (player.weight === "") {
            setAlertType(1);
            setAlertMessage("Weight is required!");
            setShowAlert(true);
        }
        else {
            ModifyPlayer();
            //setData(null);
            handleClose();
        }
    };

    if (player != null) {
        return (
            <>
                <Modal show={showModifyPlayerForm} onHide={handleClose}>
                    <Modal.Header closeButton>
                        <Modal.Title>Modify 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={player.name}
                                    onChange={handleNameInputChange}
                                    autoFocus
                                />
                            </Form.Group>
                            <Form.Group className="mb-3" controlId="Player.Position">
                                <Form.Label>Position</Form.Label>
                                <Form.Select onChange={handlePositionInputChange} defaultValue={"Goalkeeper"}>
                                    <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={player.birthDate}
                                    onChange={handleBirthDateInputChange}
                                />
                            </Form.Group> */}
                            <Form.Group className="mb-3" controlId="Player.DressNumber">
                                <Form.Label>Dress number</Form.Label>
                                <Form.Control
                                    type="number"
                                    value={player.dressNumber}
                                    onChange={handleDressNumberInputChange}
                                />
                            </Form.Group>
                            <Form.Group className="mb-3" controlId="Player.Height">
                                <Form.Label>Height</Form.Label>
                                <Form.Control
                                    type="number"
                                    value={player.height}
                                    onChange={handleHeightInputChange}
                                />
                            </Form.Group>
                            <Form.Group className="mb-3" controlId="Player.Weight">
                                <Form.Label>Weight</Form.Label>
                                <Form.Control
                                    type="number"
                                    value={player.weight}
                                    onChange={handleWeightInputChange}
                                />
                            </Form.Group>
                        </Form>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={handleClose}>
                            Close
                        </Button>
                        <Button variant="primary" onClick={handleUpdate}>
                            Update
                        </Button>
                    </Modal.Footer>
                </Modal>
            </>
        );
    }
}

export default ModifyPlayer;