import React, { useState } from 'react';
import axios from 'axios';
import './ClientItem.css';
import ModalClient from './ModalClient';
import ModalTankNation from '../Nation/ModalTankNation';

const hostURL = "http://localhost:8080";
const host = hostURL + "/api/1.0/";

const ClientItem = (data) => {

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

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

    const getTokenForHeader = function () {
        return "Bearer " + localStorage.getItem("token");
    }

    const deleteClient = async function (id) {
        const requestParams = {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": getTokenForHeader(),
            }
        };
        const requestUrl = host + `/user/${id}`;
        await fetch(requestUrl, requestParams);
    }

    return (
        <div className="client-card">
            <p className="client-attribute"> id: {data.clientItem.id} </p>
            <p className="client-attribute"> Никнейм: {data.clientItem.login} </p>
            <p className="client-attribute"> Баланс: {data.clientItem.balance} </p>
            <p className="client-attribute"> Почта: {data.clientItem.email} </p>
            <p className="client-attribute"> Роль: {data.clientItem.role} </p>
            <div className='client-button-group'>
                <button className="client-button" type="button"
                    onClick={() => setModal(true)}
                >
                    Редактировать
                </button>
                <button className="client-button" type="button"
                    onClick={deleteClient(data.clientItem.id)}
                >
                    Удалить
                </button>
                <button className="nation-button" type="button"
                    onClick={() => setModalNation(true)}
                >
                    Список танков
                </button>
                <ModalClient
                    data={data.clientItem}
                    visible={modal}
                    setVisible={setModal}
                />
                <ModalTankNation
                    data={data.clientItem}
                    visible={modalNation}
                    setVisible={setModalNation}
                />
            </div>
        </div>
    );
};

export default ClientItem
