import React, { useState, useEffect } from 'react';
import axios from 'axios';
import cl from './ModalTank.module.css';
import '../../AddTank.css';

const ModalTank = ({data, visible, setVisible}) => {
    //для обновления танка
    const [tankName, setTankName] = useState(data.name);

    const [tankCost, setTankCost] = useState(data.cost);

    const [chooiceNation, setChoiceNation] = useState(data.nation.id);

    const [chooiceLevel, setChoiceLevel] = useState(data.nation.id);

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

    const [levelItems, setLevelItems] = 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 rootClasses = [cl.myModal];
  
    if(visible)
    {
        rootClasses.push(cl.active);
    }

    //добавление нового танка
    function updateLevel(){
        setTankName()
        axios.put('http://localhost:8080/tank/' + data.id + '?firstName=' + tankName + '&nationId=' 
            + chooiceNation + '&levelId=' + chooiceLevel + '&cost=' + tankCost)
            .then((response) => {
                console.log("Обновление танка с id " + data.id)
            });
        setVisible(false);
    }

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

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


  return (
    <div className={rootClasses.join(' ')} onClick={() => setVisible(false)}>
          <div className={cl.myModalContent} onClick={(e) => e.stopPropagation()}>
                <p>
                    Название:
                    <input
                        className="add-tank-input"
                        value={tankName}
                        onChange={e => setTankName(e.target.value)}
                    />
                </p>
                <p>
                    Стоимость:
                    <input
                        className="add-tank-input"
                        value={tankCost}
                        onChange={e => setTankCost(e.target.value)}
                    />
                </p>
                <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>
                <button
                    className={cl.modalButton} 
                    type="button"
                    onClick={updateLevel}
                >
                    Сохранить  
                </button>
          </div>
      </div>
  );
}

export default ModalTank
