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

const CreateLeague = ({ showCreateLeagueForm, setShowCreateLeagueForm, setAlertType, setAlertMessage, setShowAlert, setData }) => {

    const handleClose = () => {
        setLeagueData(() => ({
            name: "",
            startDate: "",
            endDate: "",
        }));
        setShowCreateLeagueForm(false);
    };

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

    const [leagueData, setLeagueData] = useState({
        name: "",
        startDate: "",
        endDate: "",
    });

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

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

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

    const handleCreate = () => {
        let startDate = new Date(leagueData.startDate);
        let endDate = new Date(leagueData.endDate);

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

    return (
        <>
            <Modal show={showCreateLeagueForm} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>New 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={leagueData.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={leagueData.startDate}
                                onChange={handleStartDateInputChange}
                            />
                        </Form.Group>
                        <Form.Group className="mb-3" controlId="League.EndDate">
                            <Form.Label>End Date</Form.Label>
                            <Form.Control
                                type="date"
                                value={leagueData.endDate}
                                onChange={handleEndDateInputChange}
                            />
                        </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 CreateLeague;