import React, { useState, useEffect } from 'react';
import axios from 'axios';
import '../styles/App.css';
import LevelList from './items/Level/LevelList';
import './AddLevel.css';

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

//компонент для просмотра, создания и удаления уровней
const AddLevel = () => {
    const [levelItems, setLevelItems] = useState([]);
    
    //для создания нового уровня
    const [level, setLevel] = useState({level: ''});

    //загрузка всех имеющихся уровней при старте
    useEffect(() => {
        getLevels();
    }, [])

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

    //загрузка всех имеющихся уровней при старте
    const getLevels = async function () {
        const requestParams = {
            method: "GET",
            headers: {
                "Authorization": getTokenForHeader(),
            }
        };
        const requestUrl = host + `/getLevels`;
        const response = await fetch(requestUrl, requestParams);
        const data = await response.json();
        console.log(data);
        setLevelItems(data);
    }

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

    //добавление нового уровня
    const addNewLevel = async function (){
        if(level.level === ''){
            return;
        }
        else {
            const requestParams = {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": getTokenForHeader(),
                }
            };
            const requestUrl = host + `/?Level=${level.level}`;
            const response = await fetch(requestUrl, requestParams);
            getLevels();
            setLevel({level: ''});
        }
    }

    //добавили условную отрисовку
    return(
        <div>
            <div className="Group_create_level">
                <h1>Генератор уровней</h1>
                
                <div>
                    <p style={{fontWeight: "900"}}>
                        Введите уровень:
                    <input
                        className="add-level-input"
                        value={level.level}
                        onChange={e => setLevel({level: e.target.value})}
                    />
                    </p>
                </div>
                <div>
                    <button className='add-level-button'
                        onClick={addNewLevel}
                    >
                        Создать уровень
                    </button>
                    <button className='add-level-button'
                         onClick={CheckArray}
                    >
                        Вывести все уровни
                    </button>
                </div>
            </div>
            <div className="Card_list">
                {levelItems.length !== 0
                    ? 
                    <LevelList levelItems={levelItems}
                    />
                    : 
                    <h1 style={{textAlign: 'center'}}>В БД отсутствуют какие-либо уровни!</h1>
                }
            </div>
        </div>
    );
};

export default AddLevel;