import React, { useState, useEffect } from "react";

import Table from 'antd/lib/table';
import Button from 'antd/lib/button';

import Service from "../../utils/Service";
//import Tag from 'antd/lib/tag';


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

    useEffect(() => {
        Service.call({
            url: 'users',
            method: 'get',
            setData: setUsers,
            setLoading,
            errorTitle: 'Table Users Service Call',
            errorMessage: 'users/get.js'
        });

    }, []);

    const columns = [
        {
            title: "Username",
            dataIndex: "username"
        },
        {
            title: "Email",
            dataIndex: "email"
        },
        {
            title: "Role",
            dataIndex: "role"
        },
        {
            title: "Events",
            render: (text, record, index) => (
                <div>
                    {<Button onClick={() => { onCalendar(record) }}>Open Calendar</Button>}

                </div>

            )
        },
        {
            title: "Lists of Tasks",
            render: (text, record, index) => (
                <div>
                    {<Button onClick={() => { onList() }}>View</Button>}
                </div>

            )
        },
        {
            title: "Reminders",
            render: (text, record, index) => (
                <div>
                   {<Button>View</Button>}
                </div>

            )
        }
    ];


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

}

export default TableUsers;