import React, { useState, useEffect } from 'react';
import axios from 'axios';
import '../styles/App.css';
import NationList from './items/Nation/NationList';
import './AddNation.css';

//компонент для просмотра, создания и удаления уровней
const AddNation = () => {
    const [nationItems, setNationItems] = useState([]);
    
    //для создания нового уровня
    const [nation, setNation] = useState({nation: ''});

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

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

    //добавление нового уровня
    function addNewNation(){
        if(nation.nation === ''){
            return;
        }
        else {
            axios.post('http://localhost:8080/nation/?nation=' + nation.nation)
                .then((response) => {
                    CheckArray();
                    setNation({nation: ''});
                });
        }
    }

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

export default AddNation;