import React, { useState, useEffect } from 'react';
import axios from 'axios';
import '../styles/App.css';
import ClientList from './items/GameClient/ClientList';
import './AddClient.css';

export default function AddClient() {
    const [clientItems, setClientItems] = useState([]);
    
    //для создания нового уровня
    const [clientNickName, setClientNickName] = useState();

    const [clientEmail, setClientEmail] = useState();

    const [clientBalance, setClientBalance] = useState();


    //загрузка всех имеющихся уровней при старте
    useEffect(() => {
        console.log('Обращение к БД');
        axios.get('http://localhost:8080/client/')
        .then((responce) => {
            console.log(responce.data);
            setClientItems(responce.data)
        })
    }, [])

    //обновить список уровней
    function CheckArray(){
        console.log('Обращение к БД');
        axios.get('http://localhost:8080/client/')
        .then((responce) => {
            console.log(responce.data);
            setClientItems(responce.data)
        })
    }

    //добавление нового уровня
    function addNewClient(){
        console.log(clientNickName);
        console.log(clientEmail);
        console.log(clientBalance);

        if(clientNickName === ''){
            return;
        }
        else {//http://localhost:8080/client/?nickName=11&email=11&balance=11
            axios.post('http://localhost:8080/client/?nickName=' + clientNickName + '&email=' + clientEmail + '&balance=' + clientBalance)
                .then((response) => {
                    CheckArray();
                    setClientNickName('');
                    setClientEmail('');
                    setClientBalance('');
                });
        }
    }

    //добавили условную отрисовку
    return(
        <div>
            <div className="Group_create_level">
                <h1>Генератор клиентов</h1>
                <div>
                    <p style={{fontWeight: "900", marginTop:"10px"}}>
                        Введите никнейм клиента:
                        <input
                            className="add-client-input"
                            value={clientNickName}
                            onChange={e => setClientNickName(e.target.value)}
                        />
                    </p>
                    <p style={{fontWeight: "900", marginTop:"10px"}}>
                        Введите почту клиента:
                        <input
                            className="add-client-input"
                            value={clientEmail}
                            onChange={e => setClientEmail(e.target.value)}
                        />
                    </p>
                    <p style={{fontWeight: "900", marginTop:"10px"}}>
                        Введите баланс клиента:
                        <input
                            className="add-client-input"
                            value={clientBalance}
                            onChange={e => setClientBalance(e.target.value)}
                        />
                    </p>
                </div>
                <div>
                    <button className='add-level-button'
                        onClick={addNewClient}
                    >
                        Создать клиента
                    </button>
                    <button className='add-level-button'
                         onClick={CheckArray}
                    >
                        Вывести всех клиентов
                    </button>
                </div>
            </div>
            <div className="Card_list">
                {clientItems.length !== 0
                    ? 
                    <ClientList clientItems={clientItems}
                    />
                    : 
                    <h1 style={{textAlign: 'center'}}>В БД отсутствуют какие-либо клиенты!</h1>
                }
            </div>
        </div>
    );
}
