import React, { useState, useEffect } from "react";
import Calendar from 'antd/lib/calendar';
import Button from 'antd/lib/button';
import PropTypes from "prop-types";
import Badge from 'antd/lib/badge';

const UserCalendar = ({ user, closeCalendar }) => {
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState([]);


    const onPanelChange = (value, mode) => {
        console.log(value.format('YYYY-MM-DD'), mode);
    };
    //console.log(JSON.stringify(user));
    useEffect(() => {

        setLoading(true);
        const fail = () => {
            setLoading(false);
            notification["error"]({
                message: 'Lista de Publicações',
                description: 'Houve uma falha ao carregar a lista das publicações...',
                style: {
                    marginTop: 100,
                }
            });
        };
        netuno.service({
            url: '/services/users/events',
            method: 'POST',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                uid: user.uid
            }),
            success: (response) => {
                if (response.json) {
                    console.log(response.json);
                    setData(response.json);
                    setLoading(false);
                } else {
                    fail();
                }
            },
            fail: () => {
                fail();
            }
        });


    }, []);
    
    const dateCellRender = (value) => { //moment
        console.log("datecellrender", value.format("YYYY MM DD"));

        if (data.length > 0) {
            for (const item of data) {
                if (item.date_start.indexOf(value.format("YYYY-MM-DD")) == 0) {
                    return (
                        <ul className="events">
                                <li key={item.title}>
                                    <Badge status="success" text={item.title} />
                                </li>
                        </ul>
                    )
                }
            }
        }
    }

    return <>
        <Calendar dateCellRender={dateCellRender} onPanelChange={onPanelChange} />
        <Button type="primary" onClick={() => closeCalendar()}>Close Calendar</Button>
    </>;
};

UserCalendar.propTypes = {
    user: PropTypes.object.isRequired,
    closeCalendar: PropTypes.func.isRequired
};

export default UserCalendar;