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

const PlayerDetail = ({ showTeamDetail, setShowTeamDetail, team = null }) => {
    const [championships, setChampionships] = useState(null);

    const handleClose = () => setShowTeamDetail(false);
    const handleShow = () => setShowTeamDetail(true);

    const getChampionshipName = (championship) => {
        let out;
        if (championship === null || championships.length === 0) {
            out = '-';
        }
        else {
            for (let i = 0; i < championships.length; i++) {
                if (championship.id === championships[i].id) {
                    out = championships[i].name;
                    break;
                }
            }
        }
        return <input type="text" readOnly className="form-control-plaintext" value={out} />
    }

    const getChampionships = () => {
        axios.get('http://localhost:8080/pa165/championships',
            {
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem("token")
                }
            })
            .then(function (response) {
                setChampionships(response.data.content);
            })
            .catch(function (error) { });
    }

    useEffect(() => {
        if (championships === null) {
            getChampionships();
        }
    }, []);

    if (team != null) {
        return (
            <>
                <Modal show={showTeamDetail} onHide={handleClose} size="lg">
                    <Modal.Header closeButton>
                        <Modal.Title>
                            <Form.Control
                                type="text"
                                readOnly
                                className="form-control-plaintext"
                                value={team.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">Ground:</label>
                                <div className="col-sm-8">
                                    <input type="text" readOnly className="form-control-plaintext" value={team.ground} />
                                </div>
                            </Form.Group>
                            <Form.Group className="mb-3 row" controlId="PlayerDetail">
                                <label className="col-sm-4 col-form-label">Championship:</label>
                                <div className="col-sm-8">
                                    {getChampionshipName(team.championship)}
                                </div>
                            </Form.Group>
                        </Form>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={handleClose}>
                            Close
                        </Button>
                    </Modal.Footer>
                </Modal>
            </>
        );
    }
}

export default PlayerDetail;