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

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


import Service from "../../utils/Service";
import JanelaProdutos from "./JanelaProdutos/index.jsx";


const TabelaCategoria = () => {
    const [data, setData] = useState([]);
    const [produtosCategoria, setProdutosCategoria] = useState(null);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        Service.call({
            url: `categorias`,
            setData,
            setLoading,
            errorTitle: 'Tabela das Categorias',
            errorMessage: 'Houve uma falha ao carregar a tabela das Categorias...'
        });
    }, []);

    const columns = [
        {
            title: "Categorias",
            dataIndex: "nome"
        },
        {
            title: "Produtos da Categoria",
            render: (text, record, index) => (
                <div>

                    { <Button onClick={() => setProdutosCategoria(record)} >Ver Stock</Button>}

                </div>
            )
        }
    ];




    return <>
        { !!produtosCategoria && <JanelaProdutos
            categoria={produtosCategoria}
            onClose={() => setProdutosCategoria(null)}
        />}
        <Table dataSource={data} {...{ columns, loading }} />

    </>;
};

export default TabelaCategoria;
