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 JanelaStock from "./JanelaStock/index.jsx";
import Service from "../../utils/Service";


const TabelaLoja = () => {
    const [data, setData] = useState([]);
    const [ produtosLoja, setProdutosLoja ] = useState(null);
    const [ loading, setLoading ] = useState(false);

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

        const columns = [
            {
                title: "Lojas",
                dataIndex: "mercearia"
            },
            {
                title: "Stock de Lojas",
                render: (text, record, index) => (
                    <div>
                        
                        { <Button onClick={ () =>  setProdutosLoja(record) } >Ver Stock</Button>}

                    </div>
                )
            }
        ];

       


        return <>       
        { !!produtosLoja && <JanelaStock
            loja={produtosLoja}
            onClose={ () => setProdutosLoja(null) }
        /> }
        <Table dataSource={data} { ...{ columns, loading} } />

        </>;
};

export default TabelaLoja;