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

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

    const nullId = 0;

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

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

  //добавление новой нации
  function updateLevel(){
      setNation()
      axios.put('http://localhost:8080/nation/' + data.id + '?nation=' + nation + '&tankId=' + nullId)
          .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-nation-input"
                  value={nation}
                  onChange={e => setNation(e.target.value)}
              />
              <button
                  className={cl.modalButton} 
                  type="button"
                  onClick={updateLevel}
              >
                  Сохранить  
              </button>
          </div>
      </div>
  );
}

export default ModalNation
