Ext.define("App.view.CalendarContainer", {
    extend: "Ext.container.Container",
    xtype: "calendarContainer",
    alias: "widget.calendarContainer",
    padding: 10,

    // requires: ["Ext.ux.layout.ResponsiveColumn"],

    layout: {
        type: "border"
    },

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [
                {
                    xtype: "calendarGrid",
                    itemId: "calendarGrid",
                    region: "center",
                    width: "50%",
                },
                {
                    xtype: "container",
                    region: "east",
                    width: "50%",
                    layout: "vbox",
                    items: [
                        {
                            xtype: 'label',
                            itemId: 'categoryLabel',
                            html: MeetingTypeCombo.colorType(MeetingTypeCombo.TYPE_COMMISSION)+' : '+'Commission'
                            + "<br/>"+ MeetingTypeCombo.colorType(MeetingTypeCombo.TYPE_FITTING)+' : '+'Fitting'
                            + "<br/>"+ MeetingTypeCombo.colorType(MeetingTypeCombo.TYPE_PICKUP)+' : '+'Pick Up'
                            + "<br/>"+ MeetingTypeCombo.colorType(MeetingTypeCombo.TYPE_NEW)+' : '+'New',
                            padding: 10,
                        },
                        {
                            xtype: "calendarMeetingGrid",
                            itemId: "meetingGrid",
                            region: "east",
                            width: "100%",
                            flex: 1,
                            padding: 4,
                            margin: 10,
                        }
                    ]
                },
            ],
            listeners: {
                afterrender: function() {
                    me.down("#calendarGrid").setMonthAndYear(null, null);
                    me.down("#calendarGrid").setMonthString();
                    me.down("#calendarGrid").loadCalendarGrid();
                    me.down("#meetingGrid").setSelectedDate(new Date());

                }
            }
        });
        me.callParent(arguments);
    }
});

Ext.define("App.view.CalendarGrid", {
    extend: "Ext.grid.Panel",
    xtype: "calendarGrid",

    setMonthAndYear: function(m, y) {
        var me = this;
        if (m == null && y == null) {
            var d = new Date();
            var m = d.getMonth() + 1;
            var y = d.getFullYear();
        }
        me.month = m;
        me.year = y;
    },

    setMonthString: function() {
        var me = this,
            monthStringContainer = me.down("#monthString"),
            month = [
                "null",
                App.localeRes("January"),
                App.localeRes("February"),
                App.localeRes("March"),
                App.localeRes("April"),
                App.localeRes("May"),
                App.localeRes("June"),
                App.localeRes("July"),
                App.localeRes("August"),
                App.localeRes("September"),
                App.localeRes("October"),
                App.localeRes("November"),
                App.localeRes("December")
            ],
            monthString = month[me.month];
        monthStringContainer.setHtml("<div style='text-align: center'>" + monthString + " " + me.year + "</div>");
    },

    loadCalendarGrid: function() {
        var me = this;
        me.getStore().load({
            params: {
                year: me.year,
                month: me.month
            },
            callback: function(records, operation, success) {}
        });
    },

    changeMonth: function(type) {
        var me = this;
        var currentMonth = me.month;
        var currentYear = me.year;
        if (type == "NEXT") {
            if (currentMonth == 12) {
                me.setMonthAndYear(1, currentYear + 1);
            } else {
                me.setMonthAndYear(currentMonth + 1, currentYear);
            }
        } else if (type == "PREV") {
            if (currentMonth == 1) {
                me.setMonthAndYear(12, currentYear - 1);
            } else {
                me.setMonthAndYear(currentMonth - 1, currentYear);
            }
        }
        me.loadCalendarGrid();
        me.setMonthString();
    },

    initComponent: function() {
        var me = this;
        var weekDay = [
            App.localeRes("SUN"), 
            App.localeRes("MON"), 
            App.localeRes("TUE"), 
            App.localeRes("WED"), 
            App.localeRes("THU"), 
            App.localeRes("FRI"), 
            App.localeRes("SAT")
        ];
        var allColumns = [];
        function genColumns(element, index, array) {
            index += 1;
            var column = {
                text: "<div class='calendar__header'>" + element + "</div>",
                align: "left",
                flex: 1,
                sortable: false,
                dataIndex: "col_" + index + "_day",
                menuDisabled: true,
                style: {
                    padding: "0px"
                },
                renderer: function(value, metaData, record, row, col, store, grid) {
                    var today = new Date(),
                        commissionTotal = record.get("col_" + index + "_commission"),
                        pickupTotal = record.get("col_" + index + "_pickup"),
                        fittingTotal = record.get("col_" + index + "_fitting"),
                        newTotal = record.get("col_" + index + "_new"),
                        day = value ? value : "",
                        dayHtml = "",
                        meetingHtml = "",
                        dateOfBox = new Date(record.get("col_" + index));
                    today.setHours(0, 0, 0, 0);
                    if (today.getDate() == day && today.getFullYear() == me.year && today.getMonth() + 1 == me.month) {
                        dayHtml +=
                            "<b><div style='color: #31ade5;'>" +
                            day +
                            "</div></b>";
                        if(!me.selectedDate){
                            me.selectedDate = today;
                        }
                    } else {
                        if (dateOfBox.getTime() >= today.getTime()) {
                            dayHtml += "<div >" + day + "</div>";
                        } else {
                            dayHtml += "<div style='color:#AAA;'>" + day + "</div>";
                        }
                    }

                    if (commissionTotal > 0)
                        meetingHtml += "<b><div style='color:"
                                    +MeetingTypeCombo.color(MeetingTypeCombo.TYPE_COMMISSION)
                                    +"; font-size:12px;'> C: " + commissionTotal + "</div></b>";
                    if (fittingTotal > 0)
                        meetingHtml += "<b><div style='color:"
                                    +MeetingTypeCombo.color(MeetingTypeCombo.TYPE_FITTING)
                                    +"; font-size:12px;'> F: " + fittingTotal + "</div></b>";
                    if (pickupTotal > 0)
                        meetingHtml += "<b><div style='color:"
                                    +MeetingTypeCombo.color(MeetingTypeCombo.TYPE_PICKUP)
                                    +"; font-size:12px;'> P: " + pickupTotal + "</div></b>";
                    if (newTotal > 0)
                        meetingHtml += "<b><div style='color:"
                                    +MeetingTypeCombo.color(MeetingTypeCombo.TYPE_NEW)
                                    +"; font-size:12px;'> N: " + newTotal + "</div></b>";
                    

                    metaData.tdCls = "calendar__day day";
                    if(me.selectedDate && dateOfBox.getTime() == me.selectedDate.getTime()){
                        metaData.tdStyle =
                            "border-collapse:collapse; height: 90px; background-color: #e0f3ff; border-width: 1px; text-align: right";
                    }else if (dateOfBox.getTime() >= today.getTime()) {
                        metaData.tdStyle =
                            "border-collapse:collapse; height: 90px; background-color: white; border-width: 1px; text-align: right";
                    } else {
                        metaData.tdStyle =
                            "border-collapse:collapse; height: 90px; background-color:#f6f6f6; border-width: 1px; text-align: right";
                    }

                    return dayHtml + meetingHtml;
                }
            };
            allColumns.push(column);
        }
        weekDay.forEach(genColumns);
        Ext.apply(me, {
            columns: allColumns,
            store: Ext.create("App.store.CalendarStore"),
            selModel: {
                selType: "cellmodel"
            },
            viewConfig: {
                listeners: {
                    cellclick: function(view, cell, cellIndex, record, row, rowIndex, e) {
                        if(!record.get("col_" + (cellIndex + 1))) return;
                        var day = new Date(record.get("col_" + (cellIndex + 1)));
                        me.selectedDate = day;
                        var meetingGrid = me.up("calendarContainer").down("#meetingGrid");
                        meetingGrid.setSelectedDate(day);
                        view.refresh();
                    }
                }
            },
            dockedItems: [
                {
                    xtype: "toolbar",
                    dock: "top",
                    style: {
                        padding: "10px"
                    },
                    items: [
                        {
                            xtype: "button",
                            width: 40,
                            iconCls: "x-fa fa-chevron-left",
                            handler: function() {
                                me.changeMonth("PREV");
                            }
                        },
                        {
                            xtype: "button",
                            width: 40,
                            iconCls: "x-fa fa-chevron-right",
                            handler: function() {
                                me.changeMonth("NEXT");
                            }
                        },
                        {
                            xtype: "container",
                            itemId: "monthString",
                            flex: 1
                        },
                        {
                            xtype: "button",
                            text: App.localeRes("This Month"),
                            width: 100,
                            handler: function() {
                                me.setMonthAndYear(null, null);
                                me.loadCalendarGrid();
                                me.setMonthString();
                            }
                        }
                    ]
                }
            ]
        });
        me.callParent(arguments);
    }
});
