import React, { useState, useEffect } from 'react';
import axios from 'axios';
import cl from '../GameClient/ModalClient.module.css';
import '../../AddClient.css';

const ModalClient = ({data, visible, setVisible}) => {

    //для обновления уровня
    const [clientNickName, setClientNickName] = useState(data.nickName);

    const [clientEmail, setClientEmail] = useState(data.email);

    const [clientBalance, setClientBalance] = useState(data.balance);

    const [clientTank, setClientTank] = useState(null);

    const [tankItems, setTankItems] = useState([]);

    useEffect(() => {
        console.log('Обращение к БД');
        axios.get('http://localhost:8080/tank/')
        .then((responce) => {
            console.log(responce.data);
            setTankItems(responce.data)
        });
    }, [])

    //для контроля видимости модалки
    const rootClasses = [cl.myModal];

    if(visible)
    {
        rootClasses.push(cl.active);
    }

    //добавление нового уровня
    function updateLevel(){
        axios.put('http://localhost:8080/client/' + data.id + '?nickName=' 
            + clientNickName + '&email=' + clientEmail + '&balance=' + clientBalance + '&tankId=' + clientTank)
            .then((response) => {
                console.log("Обновление клиента с id " + data.id)
            });
        setVisible(false);
    }

    const getChoiceNation = (newId) => {
        setClientTank(tankItems[newId - 1].id);
    }

    return (
        <div className={rootClasses.join(' ')} onClick={() => setVisible(false)}>
            <div className={cl.myModalContent} onClick={(e) => e.stopPropagation()}>
                <p style={{marginTop: "10px"}}>
                    Никнейм:
                    <input
                        className="add-client-input"
                        value={clientNickName}
                        onChange={e => setClientNickName(e.target.value)}
                    />
                </p>
                <p style={{marginTop: "10px"}}>
                    Почта:
                    <input
                        className="add-client-input"
                        value={clientEmail}
                        onChange={e => setClientEmail(e.target.value)}
                    />
                </p>
                <p style={{marginTop: "10px"}}>
                    Баланс:
                    <input
                        className="add-client-input"
                        value={clientBalance}
                        onChange={e => setClientBalance(e.target.value)}
                    />
                </p>
                <p style={{fontWeight: "900"}}>
                        Выберите новый танк:
                        <select
                            onChange={(event) => getChoiceNation(event.target.selectedIndex)}
                        >
                            <option selected>Выберите танк</option>
                            {tankItems.map((tankItem) =>
                                <option
                                    value={tankItem.name}
                                    key={tankItem.id}
                                >
                                    {tankItem.name} 
                                </option>
                            )}
                        </select>
                    </p>
                <button
                    style={{marginTop: "10px"}}
                    className={cl.modalButton} 
                    type="button"
                    onClick={updateLevel}
                >
                    Сохранить  
                </button>
            </div>
        </div>
    );
}

export default ModalClient
