import React, { useState, useEffect } from 'react';
import cl from './ModalNation.module.css';
import '../../AddNation.css';
import TankList from '../Tank/TankList';
import { useFetcher } from 'react-router-dom';

const ModalTankNation = ({data, visible, setVisible}) => {
    //для обновления уровня
    const [nation, setNation] = useState(data.tanks);

    //для контроля видимости модалки
    const rootClasses = [cl.myModal];

    //загрузка всех имеющихся танков, а также уровней и наций при старте
    useEffect(() => {
        console.log("Загрузка МОДАЛКИ №1")
        console.log(nation);
    }, [])

    if(visible)
    {
        rootClasses.push(cl.active);
    }

    return (
        <div className={rootClasses.join(' ')} onClick={() => setVisible(false)}>
            <div className={cl.myModalContent} onClick={(e) => e.stopPropagation()}>
                    {nation.length !== 0
                        ? 
                        <TankList 
                            label={"Список танков у нации"}
                            tankItems={nation}
                        />
                        : 
                        <h1 style={{textAlign: 'center'}}>В БД отсутствуют какие-либо танки данной нации!</h1>
                    }
            </div>
        </div>
    );
}

export default ModalTankNation
