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 JanelaProdutos = ({ categoria, onClose }) => {
    const [ loading, setLoading ] = useState(false);
    const [ data, setData ] = useState([]);

    useEffect(() => {
        Service.call({
            url: `categorias/produtos/`,
            method: "POST",
            setData,
            setLoading,
            body: JSON.stringify({
                id: categoria.id
            }),
            errorTitle: 'Tabela de Stock',
            errorMessage: 'Houve uma falha ao carregar a tabela de Stock...'
        });
    }, [ ]);


    return <Modal
        title="Produtos"
        visible={true}
        onOk={()=> { onClose() } }
        onCancel={()=> { onClose() } }>
        { loading && <Spin /> }
        { data.length > 0 ?
            data.map(
                (item)=> (
                    <div>
                        <Title level={4}>{item.nome}</Title>
                        <p>Preço: {item.preco} €</p>
                        <p>Quantidade: {item.quantidade}</p>
                        
                    </div>
                )
            )
        : <p>Sem Stock.</p> }
    </Modal>;
};

JanelaProdutos.propTypes = {
    categoria: PropTypes.object.isRequired,
    onClose: PropTypes.func.isRequired
};

export default JanelaProdutos;

