import React, { useState } from 'react';
import axios from 'axios';
import cl from './ModalLevel.module.css';
import '../../AddLevel.css';

const ModalLevel = ({data, visible, setVisible}) => {

    //для обновления уровня
    const [level, setLevel] = useState(data.level);

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

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

    //добавление нового уровня
    function updateLevel(){
        setLevel()
        axios.put('http://localhost:8080/level/' + data.id + '?Level=' + level)
            .then((response) => {
                console.log("Обновление уровня с id " + data.id)
            });
        setVisible(false);
    }

    return (
        <div className={rootClasses.join(' ')} onClick={() => setVisible(false)}>
            <div className={cl.myModalContent} onClick={(e) => e.stopPropagation()}>
                <input
                    className="add-level-input"
                    value={level}
                    onChange={e => setLevel(e.target.value)}
                />
                <button
                    className={cl.modalButton} 
                    type="button"
                    onClick={updateLevel}
                >
                    Сохранить  
                </button>
            </div>
        </div>
    );
};

export default ModalLevel;
