import React, { useState } from 'react';
import axios from 'axios';
import './TankItem.css';
import ModalTank from './ModalTank';

const TankItem = (data) => {

    const [tank, setTank] = useState(null);
    
    //состояние для контроля вызова модального окна
    const[modal, setModal] = useState(false);

    function deleteTank(){
        axios.delete('http://localhost:8080/tank/' + data.tankItem.id)
            .then((response) => {
                console.log("Удаление танка с id " + data.tankItem.id)
            });
    }

    return (
        <div className="tank-card">
            <p className="tank-attribute"> id: {data.tankItem.id} </p>
            <p className="tank-attribute"> название: {data.tankItem.name} </p>
            <p className="tank-attribute"> уровень: {data.tankItem.level.level} </p>
            <p className="tank-attribute"> нация: {data.tankItem.nation.nation} </p>
            <p className="tank-attribute"> стоимость: {data.tankItem.cost} </p>
            <div className='tank-button-group'>
                <button className="tank-button" type="button"
                    onClick={() => setModal(true)}
                >
                    Редактировать
                </button>
                <button className="tank-button" type="button"
                    onClick={deleteTank}
                >
                    Удалить
                </button>
                <ModalTank
                    data={data.tankItem}
                    visible={modal}
                    setVisible={setModal}
                />
            </div>
        </div>
    );
}

export default TankItem
