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

const { Title } = Typography;

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

        useEffect(() => {
            Service.call ({
                url: `funcionario/salario`,
                method: "post",
                body: JSON.stringify({
                    uid: funcionario.uid
                }),
                setLoading, 
                setData,
                errorTitle: 'Lista de Salários',
                errorMessage: 'Houve uma falha ao carregar a lista das Salários...'
            });
        }, []);
    return <Modal
        title="Salários"
        visible={true}
        onOk={()=> { onClose() } }
        onCancel={()=> { onClose() } }>
        <Title level={4}>Salário Mensal:</Title>
        <p>Email: { funcionario.email }</p>
        <p>Telemovel: {funcionario.telemovel}</p>
        { Service.spin(loading) }
        { data.length > 0 ?
            data.map(
                (item)=> (
                    <div>
                        <p>Quantia: { item.quantia }€</p>
                        <p>Especialidade: {item.nome}</p>
                    </div>
                )
            )
        : <p>Estamos a carregar os seus dados.</p> }
    </Modal>;
};

JanelaSalario.propTypes = {
    funcionario: PropTypes.object.isRequired,
    onClose: PropTypes.func.isRequired
};

export default JanelaSalario;
