import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";

import Calendar from 'antd/lib/calendar';
import Button from 'antd/lib/button';
import Badge from 'antd/lib/badge';

import "./index.less";
import Service from "../../utils/Service";

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(() => {

        Service.call({
            url: 'users/events',
            method: 'post',
            body: JSON.stringify({
                uid: user.uid
            }),
            setData,
            setLoading,
            errorTitle: 'Calendar Service Call',
            errorMessage: 'users/events'
        });

    }, []);

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

        if (data.length > 0) {
            for (const item of data) {
                console.log("datecellrender: ", item.date_start.indexOf(value.format("YYYY-MM-DD")));
                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 <>
        { Service.spin(loading)}
        <Calendar dateCellRender={dateCellRender} onPanelChange={onPanelChange} />
        <Button type="default" onClick={() => closeCalendar()}>Close Calendar</Button>
        <Button type="primary">Add Event</Button>
    </>;
};

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

export default UserCalendar;