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

const ModifyLeague = ({ showModifyLeagueForm, setShowModifyLeagueForm, setAlertType, setAlertMessage, setShowAlert, league = null, setLeague, setData }) => {

    const [modifyDate, setModifyDate] = useState(true);

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

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

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

    const handleStartDateInputChange = (e) => {
        setLeague((values) => ({
            ...values,
            startDate: e.target.value
        }));
    };

    const handleEndDateInputChange = (e) => {
        setLeague((values) => ({
            ...values,
            endDate: e.target.value
        }));
    };

    const ModifyLeague = () => {
        const json = JSON.stringify({ id: league.id, name: league.name, startDate: league.startDate, endDate: league.endDate });

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


    const handleModify = () => {
        let startDate = new Date(league.startDate);
        let endDate = new Date(league.endDate);

        if (league.name === "") {
            setAlertType(1);
            setAlertMessage("Name is required!")
            setShowAlert(true);
        }
        else if (startDate < Date.now() && !modifyDate) {
            setAlertType(1);
            setAlertMessage("Start date must be in future!")
            setShowAlert(true);
        }
        else if (endDate < startDate && !modifyDate) {
            setAlertType(1);
            setAlertMessage("End date must be after start date!")
            setShowAlert(true);
        }
        else {
            ModifyLeague();
            setData(null);
            handleClose();
        }
    };

    useEffect(() => {
        if (league != null) {
            let startDate = new Date(league.startDate);
            if (startDate.getTime() >= Date.now()) {
                setModifyDate(false);
            } else {
                setModifyDate(true);
            }
        }
    }, [showModifyLeagueForm, league, modifyDate]);

    if (league != null) {
        {
            return (
                <>
                    <Modal show={showModifyLeagueForm} onHide={handleClose}>
                        <Modal.Header closeButton>
                            <Modal.Title>Modify league</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <Form>
                                <Form.Group className="mb-3" controlId="League.Name">
                                    <Form.Label>League name</Form.Label>
                                    <Form.Control
                                        type="text"
                                        placeholder="League name"
                                        value={league.name}
                                        onChange={handleNameInputChange}
                                        autoFocus
                                    />
                                </Form.Group>
                                <Form.Group className="mb-3" controlId="League.StartDate">
                                    <Form.Label>Start Date</Form.Label>
                                    <Form.Control
                                        type="date"
                                        value={league.startDate}
                                        onChange={handleStartDateInputChange}
                                        readOnly
                                    />
                                </Form.Group>
                                <Form.Group className="mb-3" controlId="League.EndDate">
                                    <Form.Label>End Date</Form.Label>
                                    <Form.Control
                                        type="date"
                                        value={league.endDate}
                                        onChange={handleEndDateInputChange}
                                        readOnly
                                    />
                                </Form.Group>
                            </Form>
                        </Modal.Body>
                        <Modal.Footer>
                            <Button variant="secondary" onClick={handleClose}>
                                Close
                            </Button>
                            <Button variant="primary" onClick={handleModify}>
                                Update
                            </Button>
                        </Modal.Footer>
                    </Modal>
                </>
            );
        }
    }
}

export default ModifyLeague;