import React from 'react';
import { Modal, Form, Button, } from 'react-bootstrap';

const LeagueDetail = ({ showLeagueDataForm, setShowLeagueDataForm, league = null }) => {
    const handleClose = () => setShowLeagueDataForm(false);
    const handleShow = () => setShowLeagueDataForm(true);

    if (league != null) {
        return (
            <>
                <Modal show={showLeagueDataForm} onHide={handleClose} size="lg">
                    <Modal.Header closeButton>
                        <Modal.Title>
                            <Form.Control
                                type="text"
                                readOnly
                                value={league.name}
                            />
                        </Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <Form aria-disabled={true}>
                            <Form.Group className="mb-3 row" controlId="PlayerDetail">
                                <label className="col-sm-4 col-form-label">League start:</label>
                                <div className="col-sm-8">
                                    <input type="date" readOnly className="form-control-plaintext" value={league.startDate} />
                                </div>
                            </Form.Group>
                            <Form.Group className="mb-3 row" controlId="PlayerDetail">
                                <label className="col-sm-4 col-form-label">League end:</label>
                                <div className="col-sm-8">
                                    <input type="date" readOnly className="form-control-plaintext" value={league.endDate} />
                                </div>
                            </Form.Group>
                        </Form>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={handleClose}>
                            Close
                        </Button>
                    </Modal.Footer>
                </Modal>
            </>
        );
    }
}

export default LeagueDetail;