import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import Modal from 'antd/lib/modal';
import Spin from 'antd/lib/spin';
import Typography from 'antd/lib/typography';
import notification from 'antd/lib/notification';
import Service from "../../../utils/Service";


const { Title } = Typography;

const StockBotao = ({ farmacia, onClose }) => {
    const [ loading, setLoading ] = useState(false);
    const [ data, setData ] = useState([]);

    useEffect(() => {
        Service.call({
            url: `farmacias/produtos`,
            method: "post",
            setData,
            setLoading,
            body: JSON.stringify({
                id: farmacia.id
            }),
            errorTitle: 'Botão de Stock',
            errorMessage: 'Houve uma falha ao carregar a lista de stock...'
        })
    }, []);

    return <Modal
        title="Produtos"
        visible={true}
        onOk={()=> { onClose() } }
        onCancel={()=> { onClose() } }>
        { loading && <Spin /> }
        { data.length > 0 ?
            data.map(
                (item)=> (
                    <div>
                        <Title level={3}>{item.nome}</Title>
                        <p>Categoria: {item.categoria}</p>
                        <p>Preco: {item.preco}</p>
                        <p>Stock: {item.stock}</p>
                    </div>
                )
            )
        : <p>Não existe.</p> }
    </Modal>;
};

StockBotao.propTypes = {
    farmacia: PropTypes.object.isRequired,
    onClose: PropTypes.func.isRequired
};

export default StockBotao;