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

import Table from 'antd/lib/table';
import Column from "antd/lib/table/Column";
import Tag from "antd/lib/tag";
import Button from 'antd/lib/button';
import StockBotao from "./StockBotao/index.jsx";
import Service from "../../utils/Service";





const TabelaFarmacia = () => {


    const [data, setData] = useState([]);
    const [ farmacia, setFarmacia ] = useState(null);
    const [ loading, setLoading ] = useState(false);




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

        const columns = [
            {
                title: "Farmácia",
                dataIndex: "lab"
            },
            {
                title: "Stock de Farmácias",
                render: (text, record, index) => (
                    <div>
                        { <Button onClick={ () =>  setFarmacia(record) }>Ver Stock</Button>}
                    </div>
                )
            }
        ];

       


        return <>

        { !!farmacia && <StockBotao
            farmacia={farmacia}
            onClose={ () => setFarmacia(null) }
        /> }
        
        
        <Table dataSource={data} {... { columns}} />

        </>
};

export default TabelaFarmacia;