import React, { useState } from 'react';
import axios from 'axios';
import './NationItem.css';
import ModalNation from './ModalNation';
import ModalTankNation from './ModalTankNation';

//отвечает за отдельно взятую нацию (вывод карточки с ним)
const NationItem = (data) => {
    const [nation, setNation] = useState(null);
    
    //состояние для контроля вызова модального окна
    const[modal, setModal] = useState(false);

    //состояние для вызова окна показа списка танков нации
    const[modalNation, setModalNation] = useState(false);

    function deleteNation(){
        axios.delete('http://localhost:8080/nation/' + data.nationItem.id)
            .then((response) => {
                console.log("Удаление нации с id " + data.nationItem.id)
            });
    }

    return (
        <div className="nation-card">
            <p className="nation-attribute"> id: {data.nationItem.id} </p>
            <p className="nation-attribute"> нация: {data.nationItem.nation} </p>
            <div className='nation-button-group'>
                <button className="nation-button" type="button"
                    onClick={() => setModal(true)}
                >
                    Редактировать
                </button>
                <button className="nation-button" type="button"
                    onClick={deleteNation}
                >
                    Удалить
                </button>
                <button className="nation-button" type="button"
                    onClick={() => setModalNation(true)}
                >
                    Список танков
                </button>
                <ModalNation
                    data={data.nationItem}
                    visible={modal}
                    setVisible={setModal}
                />
                <ModalTankNation
                    data={data.nationItem}
                    visible={modalNation}
                    setVisible={setModalNation}
                />
            </div>
        </div>
    );
}

export default NationItem
