const AppointmentCalendar = {
    route : 'appointment-calendar/:groupId',
    isDefault : true,
    templateUrl : 'js/app/views/appointments/appointment-calendar.html',
    navigatioData : null,
    redirectUrl : 'auth/login',

    canAccess : function()
    {
        return this.app.user.isLoggedIn();
    },

    create : function( p )
    {
        this.container = this.app.UI.getContentContainer();
        const $container = $( this.container ),
            members = [],
            apps = [];

        this.render();

        this.app.rpc.call(
            'Team',
            'getDetails',
            {
                teamId : p.groupId
            },
            function( res )
            {
                if ( res && res.hasOwnProperty( 'data' ) && res.data.hasOwnProperty( 'members' ) )
                {
                    let m;
                    for ( let mi = 0; mi < res.data.members.length; mi++ )
                    {
                        m = this.createInstance( 'UserProfile', res.data.members[ mi ] );
                        m.contextGroupId = p.groupId;
                        members.push( m );
                    }

                    this.app.rpc.call(
                        'Appointment',
                        'getList',
                        {
                            groupId : p.groupId,
                            filter : 'all'
                        },
                        function( res2 )
                        {
                            if ( res2 && res2.hasOwnProperty( 'data' ) && res2.data.hasOwnProperty( 'appointments' ) )
                            {
                                let app;
                                for ( let ai = 0; ai < res2.data.appointments.length; ai++ )
                                {
                                    app = this.createInstance( 'Appointment', res2.data.appointments[ ai ] );
                                    // app.contextGroup
                                    // app.contextGroupMembers
                                    apps.push( app );
                                }
                            }




                            /* initialize the external events
                             -----------------------------------------------------------------*/


                            $('#external-events div.external-event').each(function() {

                                // store data so the calendar knows to render an event upon drop
                                $(this).data('event', {
                                    title: $.trim($(this).text()), // use the element's text as the event title
                                    stick: true // maintain when user navigates (see docs on the renderEvent method)
                                });

                                // make the event draggable using jQuery UI
                                $(this).draggable({
                                    zIndex: 1111999,
                                    revert: true,      // will cause the event to go back to its
                                    revertDuration: 0  //  original position after the drag
                                });

                            });


                            /* initialize the calendar
                             -----------------------------------------------------------------*/
                            var date = new Date();
                            var d = date.getDate();
                            var m = date.getMonth();
                            var y = date.getFullYear();

                            $('#calendar').fullCalendar({
                                header: {
                                    left: 'prev,next today',
                                    center: 'title',
                                    right: 'month,agendaWeek,agendaDay'
                                },
                                editable: true,
                                droppable: true, // this allows things to be dropped onto the calendar
                                drop: function() {
                                    // is the "remove after drop" checkbox checked?
                                    if ($('#drop-remove').is(':checked')) {
                                        // if so, remove the element from the "Draggable Events" list
                                        $(this).remove();
                                    }
                                },
                                events: [
                                    {
                                        title: 'All Day Event',
                                        start: new Date(y, m, 1)
                                    },
                                    {
                                        title: 'Long Event',
                                        start: new Date(y, m, d-5),
                                        end: new Date(y, m, d-2)
                                    },
                                    {
                                        id: 999,
                                        title: 'Repeating Event',
                                        start: new Date(y, m, d-3, 16, 0),
                                        allDay: false
                                    },
                                    {
                                        id: 999,
                                        title: 'Repeating Event',
                                        start: new Date(y, m, d+4, 16, 0),
                                        allDay: false
                                    },
                                    {
                                        title: 'Meeting',
                                        start: new Date(y, m, d, 10, 30),
                                        allDay: false
                                    },
                                    {
                                        title: 'Lunch',
                                        start: new Date(y, m, d, 12, 0),
                                        end: new Date(y, m, d, 14, 0),
                                        allDay: false
                                    },
                                    {
                                        title: 'Birthday Party',
                                        start: new Date(y, m, d+1, 19, 0),
                                        end: new Date(y, m, d+1, 22, 30),
                                        allDay: false
                                    },
                                    {
                                        title: 'Click for Google',
                                        start: new Date(y, m, 28),
                                        end: new Date(y, m, 29),
                                        url: 'http://google.com/'
                                    }
                                ]
                            });




                            //this.createComponent( 'appointment-data-table', this.findById( 'container-appointment-data-table' ), apps );
                            $container.find( '.sk-loading' ).toggleClass( 'sk-loading' );
                        }.bind( this )
                    );

                }
            }.bind ( this )
        );
    },

    destroy : function()
    {

    }
};

export { AppointmentCalendar };