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 AddTank = () => {
    const [tankItems, setTankItems] = useState([]);

    //для создания нового танка
    const [tankName, setTankName] = useState({tankName: ''});

    const [tankCost, setTankCost] = useState({tankCost: ''});

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

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

    //храним выбранные нацию и уровень для нового танка
    const [chooiceNation, setChooiceNation] = useState();
    const [chooiceLevel, setChooiceLevel] = useState();

    const [fileByte, setFileByte] = useState(null);
    const inputRef = useRef();

    //загрузка всех имеющихся танков, а также уровней и наций при старте
    useEffect(() => {
        console.log('Обращение к БД');
        axios.get('http://localhost:8080/tank/')
        .then((responce) => {
            console.log(responce.data);
            setTankItems(responce.data)
        });
        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)
        });
    }, [])

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

    //добавление нового танка
    async function addNewTank(){
        console.log(tankName);
        console.log(tankCost);
        console.log(chooiceNation);
        console.log(chooiceLevel);
        //console.log(imageURL);

        //const header = new Headers({ "Access-Control-Allow-Origin": "*" });

        axios.post("http://localhost:8080/tank/?firstName=" + tankName.tankName + 
            "&id=" + chooiceNation.id + "&nationId=" + chooiceNation + "&levelId=" + chooiceLevel + 
            "&cost=" + tankCost.tankCost)
            .then((response) => {
                console.log("Успешное добавление");
                console.log(response.data);
                CheckArray();
                setTankCost({tankCost: ''});
                setTankName({tankName: ''});
            });

        //}*/
    }

    //хранит картинку для танка
    const [imageURL, setImageURL] = useState();

    const fileReader = new FileReader();
    fileReader.onloadend = () => {
        const tempval = fileReader.result
        setImageURL(tempval);
    };

    function handleOnChange(event) {
        event.preventDefault();
        const file = event.target.files[0];
        fileReader.readAsDataURL(file);
    }

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

    const getChoiceLevel = (newId) => {
        setChooiceLevel(levelItems[newId - 1].id);
    }

    //для добавления картинок
    /*<p style={{fontWeight: "900", marginTop: "10px"}}>
        Выберите изображение:
        <input className="add-tank-input" id="formFileSm" type="file" 
            accept="image/jpeg, image/png, image/jpg"
            value=''
            style={{marginTop: "10px"}}
            //onChange={e => setTank({tankImage: e.target.value})}
            //onChange={() =>  setTank({tankImage: inputRef.current.files[0]})}
            onChange={handleOnChange}
            //ref={inputRef}
        />
    </p>*/

    //добавили условную отрисовку
    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) => getChoiceLevel(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"}}>
                        Введите название:
                        <input
                            className="add-tank-input"
                            value={tankName.tankName}
                            onChange={e => setTankName({tankName: e.target.value})}
                        />
                    </p>
                    <p style={{fontWeight: "900"}}>
                        Введите стоимость:
                        <input
                            className="add-tank-input"
                            value={tankCost.tankCost}
                            onChange={e => setTankCost({tankCost: e.target.value})}
                        />
                    </p>
                </div>
                <div>
                    <button className='add-level-button'
                        onClick={addNewTank}
                    >
                        Создать танк
                    </button>
                    <button className='add-level-button'
                         onClick={CheckArray}
                    >
                        Вывести все танки
                    </button>
                </div>
            </div>
            <div className="Card_list">
                {tankItems.length !== 0
                    ? 
                    <TankList tankItems={tankItems}
                    />
                    : 
                    <h1 style={{textAlign: 'center'}}>В БД отсутствуют какие-либо танки!</h1>
                }
            </div>
        </div>
    );
}

export default AddTank
