import React, { useState, useEffect } from "react";
import Table from 'antd/lib/table';
import Button from 'antd/lib/button';
//import Tag from 'antd/lib/tag';


const TableUsers = ({onView}) => {
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(false);
    const [ userEvents, setUserEvents ] = useState(null);

    useEffect(() => {
        setLoading(true);
        const fail = ()=> {
            this.setState({ loading: false });
            notification["error"]({
                message: 'Tabela Pessoas',
                description: 'Data loading error...',
                style: {
                    marginTop: 100,
                }
            });
        };
        netuno.service({
            url: '/services/users',
            method: 'GET',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json'
            },
            success: (response)=> {
                //console.log(response);
                if (response.json) {
                    setUsers(response.json);
                    setLoading(false);
                } else {
                    fail();
                }
            },
            fail: ()=> {
                fail();
            }
        });
    }, []);

    const columns = [
        {
            title: "Username",
            dataIndex: "username"
        },
        {
            title: "Email",
            dataIndex: "email"
        },
        {
            title: "Role",
            dataIndex: "role"
        },
        {
            title: "Calendar",
            render: (text, record, index) => (
                <div>
                    {<Button onClick={ () => {setUserEvents(record); onView(record)}}>View</Button>}
                    
                </div>
                
            )
        }
    ];
    

    return  <>
                <Table dataSource={users} { ...{ columns, loading } } />
            </>

}

export default TableUsers;