import React, { useState, useEffect } from "react";
import Table from 'antd/lib/table';
import Tag from 'antd/lib/tag';
import Button from 'antd/lib/button';
import JanelaSalario from "./JanelaSalario/index.jsx";
import Service from "../../utils/Service";


const TabelaFuncionario = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);
    const [funcSalario, setFuncSalario] = useState(null);

    useEffect(() => {
            Service.call ({
                url: `funcionario`,
                method: "get",
                body: "",
                setLoading, 
                setData,
                errorTitle: 'Tabela Funcionarios',
                errorMessage: 'Houve uma falha na tabela dos funcionarios...'
            });
        }, []);

    const columns = [
        {
            title: "Nome",
            dataIndex: "name"
        },
    
        {
            title: "Armazém",
            dataIndex: "armz"
        },
    
        {
            title: "Especialidade",
            dataIndex: "esp",
            render: (Especialidade) => (
            <div>
                {
                    Especialidade.map((nome) => (
                        <Tag>{nome}</Tag>
                    ))
                }
            </div>
        
            )
        },

        {
            title: "Salários",
            render: (text, record, index) => (
                <div>
                    { <Button onClick={ () =>  setFuncSalario(record) }>Salários</Button>}
                </div>
            )
        }
        
    ];

    return <>
    { !!funcSalario && <JanelaSalario
        funcionario={funcSalario}
        onClose={ () => setFuncSalario(null) }
    /> }
    <Table dataSource={data} {...{columns, loading} }/>
    </>
};

export default TabelaFuncionario;
