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

const hostURL = "http://localhost:8080";
const host = hostURL + "/api/1.0";

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

    const [clientEmail, setClientEmail] = useState();

    const [clientBalance, setClientBalance] = useState();

    const [pageNumbers, setPageNumbers] = useState([]);

    const [pageNumber, setPageNumber] = useState();

    useEffect(() => {
        getUsers(1);
    }, []);

    const pageButtonOnClick = function (page) {
        getUsers(page);
    }

    const getTokenForHeader = function () {
        return "Bearer " + localStorage.getItem("token");
    }

    //загрузка всех имеющихся клиентов при старте
    const getUsers = async function (page) {
        const requestParams = {
            method: "GET",
            headers: {
                "Authorization": getTokenForHeader()
            }
        };
        const requestUrl = host + `/users?page=${page}`;
        const response = await fetch(requestUrl, requestParams);
        const data = await response.json();
        setClientItems(data.first.content);
        setPageNumber(data.first.number);
        setPageNumbers(data.second);
    }

    //обновить список уровней
    function CheckArray(){
        getUsers(1);
    }

    //добавили условную отрисовку
    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={CheckArray}
                    >
                        Вывести всех клиентов
                    </button>
                </div>
            </div>
            <div className="Card_list">
                {clientItems.length !== 0
                    ? 
                    <ClientList clientItems={clientItems}
                    />
                    : 
                    <h1 style={{textAlign: 'center'}}>В БД отсутствуют какие-либо клиенты!</h1>
                }
            </div>
            <div>
                <p>
                    Pages:
                </p>
                <nav>
                    <ul className="pagination">
                        {pageNumbers.map((number) => (
                            <li className={`page-item ${number === pageNumber + 1 ? "active" : ""}`}
                                onClick={() => pageButtonOnClick(number)}>
                                <a className="page-link" href="#">{number}</a>
                            </li>
                        ))}
                    </ul>
                </nav>
            </div>
        </div>
    );
}
