import React, { useState, useEffect, useRef} from 'react';
import axios from 'axios';
import '../styles/App.css';
import TankList from './items/Tank/TankList';
import './AddTank.css';

const PageForChecking = () => {

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

    const [nationItems, setNationItems] = useState([]);

    const [levelItems, setLevelItems] = useState([]);

    const [chooiceNation, setChooiceNation] = useState();

    const [chooiceFirstLevel, setChooiceFirstLevel] = useState();

    const [chooiceSecondLevel, setChooiceSecondLevel] = useState();

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

    const getChoiceNation = (newId) => {
        setChooiceNation(nationItems[newId - 1].nation);
    }

    const getChooiceFirstLevel = (newId) => {
        setChooiceFirstLevel(levelItems[newId - 1].level);
    }

    const getChooiceSecondLevel = (newId) => {
        setChooiceSecondLevel(levelItems[newId - 1].level);
    }

    function findList(){
        console.log(chooiceNation);
        console.log(chooiceFirstLevel);
        console.log(chooiceSecondLevel);

        axios.get('http://localhost:8080/tank/filteredList/?nation=' + chooiceNation + '&firstLevel=' + chooiceFirstLevel + '&secondLevel=' + chooiceSecondLevel)
            .then((response) => {
                setTankItems(response.data)
            });

        console.log(tankItems)
    }

    return(
        <div>
            <div className="Group_create_level">
                <h1>Фильтрация танков</h1>
                <div>
                    <p style={{fontWeight: "900"}}>
                        Выберите нацию:
                        <select
                            onChange={(event) => getChoiceNation(event.target.selectedIndex)}
                        >
                            <option selected>Выберите нацию</option>
                            {nationItems.map((nationItem) =>
                                <option
                                    value={nationItem.nation}
                                    key={nationItem.id}
                                >
                                    {nationItem.nation} 
                                </option>
                            )}
                        </select>
                    </p>
                    <p style={{fontWeight: "900"}}>
                        Выберите начальный диапазон уровней:
                        <select style={{marginTop: "10px"}}
                            onChange={(event) => getChooiceFirstLevel(event.target.selectedIndex)}
                        >
                            <option selected>Выберите уровень</option>
                            {levelItems.map((levelItem) =>
                                <option
                                    value={levelItem.level} 
                                    key={levelItem.id}
                                >
                                    {levelItem.level} 
                                </option>
                            )}
                        </select>
                    </p>
                    <p style={{fontWeight: "900"}}>
                        Выберите конечный диапазон уровней:
                        <select style={{marginTop: "10px"}}
                            onChange={(event) => getChooiceSecondLevel(event.target.selectedIndex)}
                        >
                            <option selected>Выберите уровень</option>
                            {levelItems.map((levelItem) =>
                                <option
                                    value={levelItem.level} 
                                    key={levelItem.id}
                                >
                                    {levelItem.level} 
                                </option>
                            )}
                        </select>
                    </p>
                </div>
                <button className='add-level-button'
                        onClick={findList}
                    >
                        Найти танки
                    </button>
            </div>
            <div className="Card_list"> 
                {tankItems.length !== 0
                    ? 
                    <TankList tankItems={tankItems}
                    />
                    : 
                    <h1 style={{textAlign: 'center'}}>Отсутствуют какие-либо танки при таком фильтре!</h1>
                }
            </div>
        </div>
    );
}

export default PageForChecking
