import { useEffect, useState } from "react"
import { Box, Button } from "@mui/material"
import DataTable from "../components/DataTable"
import { GridColDef } from "@mui/x-data-grid"
import UserService from "../services/UserService"

export default function Users() {
    const [users, setUsers] = useState<any>(null)

    const getUsers = async () => {
        await UserService.getUsers().then(response => {
            setUsers(response.data)
        })
    }

    const columns: GridColDef[] = [
        { field: 'id', headerName: 'ID', type: "number", width: 70 },
        { field: 'email', headerName: 'Email', width: 130 },
        { field: 'login', headerName: 'Логин', width: 130 },
        { field: 'phone', headerName: 'Телефон', width: 90 },
        { field: 'name', headerName: 'Имя', width: 90 },
        { field: 'surname', headerName: 'Фамилия', width: 90 },
        { field: 'is_active', headerName: 'Активен', type: "boolean", width: 90 },
        {
            field: 'role_id',
            headerName: 'Роль',
            valueGetter: (value, row) => `${value}`,
            width: 90
        },
    ];

    return (
        <Box>
            <Button onClick={() => getUsers()}>
                Get users
            </Button>

            {users &&
                <DataTable rows={users} columns={columns}/>
            }
        </Box>
    )
}