/* jshint esversion: 6 */

// Libraries
var Backbone = require('backbone');
var utils = require('../utils');
var noSchedule = true;
var oldModel;
var ScheduleView = Backbone.View.extend({

    initialize: function (options) {
        this.widgetId = options.widgetId;

        if (!this.model.get('scheduleTimezone')) {
            // Guess the user's timezone
            this.model.set({
                'scheduleTimezone': utils.guessTimezone()
            });
        }

        var schedules = this.model.get('schedules');
        if (!schedules) {
            this.initializeTimeValues();
        }

        this.schedulesModel = new Backbone.Model({
            schedules: this.model.get('schedules')
        });

        this.listenTo(this.schedulesModel, 'change', () => {
            this.model.set(this.schedulesModel.toJSON());
        });

        this.render();
    },

    render: function () {
        var that = this,
            schedule = this.model.get('schedules');

        $('#schedule-timezone').timezones().val(this.model.get('scheduleTimezone'));
        $('#schedules_str').val(JSON.stringify(schedule));

        for(var i = 0; i < schedule.length; i++) {
            var theDay = schedule[i];

            if (theDay != null && theDay != undefined) {

                $('#available-from-'+ this.getDayString(i)).timepicker(
                    'setTime',
                    utils.time24to12h(theDay.start)
                );
                $('#available-to-'+ this.getDayString(i)).timepicker(
                    'setTime',
                    utils.time24to12h(theDay.stop)
                );
            }
        }

        if(this.allHourSchedule()) {
            this.allHoursUI(true, false);
        } else {
            this.allHoursUI(false, true);
        }

        // Binding events to the UI using JQuery

        // 24/7 checkbox
        $('#chkAllHours').on('click', function() {
            var checked = $(this).is(':checked');

            that.handleAllHoursClick(checked);
        });

        // Select timezone drop down
        $('#schedule-timezone').on('change', function() {
            that.handleTimezoneChange($(this).val());
        });

        // Day "radio" buttons
        $('.dayButton').on('click', function() {
            var elemId = $(this).attr('id'),
                checked = $(this).is(':checked');

            that.handleDayClick(elemId, checked);
        });

        $('.available-from').timepicker().
            on('changeTime.timepicker', (e) => {
                var days = this.model.get('schedules'),
                    id = e.target.id,
                    dayId = that.getDayInt(id),
                    theDay = days[dayId];

                theDay.start = utils.time12to24h(e.time.value);
                days[dayId] = theDay;

                this.model.set({
                    'schedules': days
                });

                this.model.trigger('change', this.model);
                $('#schedules_str').val(JSON.stringify(days));
            });

        $('.available-to').timepicker().
            on('changeTime.timepicker', (e) => {
                var days = this.model.get('schedules'),
                    id = e.target.id,
                    dayId = that.getDayInt(id),
                    theDay = days[dayId];

                theDay.stop = utils.time12to24h(e.time.value);
                days[dayId] = theDay;

                this.model.set({
                    'schedules': days
                });

                this.model.trigger('change', this.model);
                $('#schedules_str').val(JSON.stringify(days));
            });

        return this;
    },

    handleDayClick: function(paId, paChecked) {
        var days = this.model.get('schedules'),
            dayText = '',
            curDay = 0,
            day = null;

        curDay = this.getDayInt(paId);
        dayText = this.getDayString(curDay);
        day = days[parseInt(curDay)];

        if(paChecked) {
            day.active = true;
            /*$('#available-from').val(utils.time24to12h(day.start));
            $('#available-to').val(utils.time24to12h(day.stop));*/
            $('#available-from-'+dayText+', .input-group-addon').removeClass('disabled-elements').prop("disabled", false);
            $('#available-to-'+dayText+', .input-group-addon').removeClass('disabled-elements').prop("disabled", false);
            $('.day-row-'+dayText).find('.input-group-addon').show();
        } else {
            day.active = false;
            $('#available-from-'+dayText+', .input-group-addon').addClass('disabled-elements').prop("disabled", true);
            $('#available-to-'+dayText+', .input-group-addon').addClass('disabled-elements').prop("disabled", true);
            $('.day-row-'+dayText).find('.input-group-addon').hide();
        }

        days[parseInt(curDay)] = day;
        this.model.set({ schedules: days });
        this.model.trigger('change', this.model);
        $('#schedules_str').val(JSON.stringify(days));
    },

    handleAllHoursClick: function(paChecked) {
        if(paChecked) {
            this.allHoursUI(true, false);
            this.allHoursSwop(true);
        } else {
            this.allHoursSwop(false);
            this.allHoursUI(false, false);
        }
    },

    getDayString: function(paNumber) {
        switch(parseInt(paNumber)) {
            case 0:
                return 'sunday';
            case 1:
                return 'monday';
            case 2:
                return 'tuesday';
            case 3:
                return 'wednesday';
            case 4:
                return 'thursday';
            case 5:
                return 'friday';
            case 6:
                return 'saturday';
        }
    },

    getDayInt: function(paString) {
        var loDay = paString.toLowerCase();

        if (loDay.indexOf('sunday') >= 0)
                return 0;
        else if (loDay.indexOf('monday') >= 0)
                return 1;
        else if (loDay.indexOf('tuesday') >= 0)
                return 2;
        else if (loDay.indexOf('wednesday') >= 0)
                return 3;
        else if (loDay.indexOf('thursday') >= 0)
                return 4;
        else if (loDay.indexOf('friday') >= 0)
                return 5;
        else if (loDay.indexOf('saturday') >= 0)
                return 6;
    },

    allHoursUI: function(paState, paInitial) {
        var that = this,
            days = this.model.get('schedules');

        if(paState) {
            noSchedule = true;
            $('#chkAllHours').prop('checked', true);
            $('.dayButton').prop("disabled", true);

            if($('.input-group-addon').is(':visible'))
                $('.input-group-addon').hide();

            $('.available-from, .input-group-addon').addClass('disabled-elements').prop("disabled", true);
            $('.available-to, .input-group-addon').addClass('disabled-elements').prop("disabled", true);

            for( var i = 0; i < days.length; i++) {
                var loDay = days[i],
                control = $('.day-row-'+that.getDayString(loDay.id)),
                controlButton = control.find('.dayButton');

                if (loDay.active) {
                    controlButton.prop('checked', true);
                } else {
                    controlButton.find('.dayButton').prop('checked', false);
                }
            }

        } else {
            noSchedule = false;
            $('#chkAllHours').prop('checked', false);
            $('.dayButton').prop("disabled", false);
            $('.available-from, .input-group-addon').removeClass('disabled-elements').prop("disabled", false);
            $('.available-to, .input-group-addon').removeClass('disabled-elements').prop("disabled", false);

            for( var i = 0; i < days.length; i++) {
                var loDay = days[i],
                control = $('.day-row-'+that.getDayString(loDay.id)),
                controlButton = control.find('.dayButton');

                if (loDay.active) {
                    controlButton.prop('checked', true);
                    control.find('.input-group-addon').show();
                } else {
                    controlButton.find('.dayButton').prop('checked', false);
                    control.find('.input-group-addon').hide();
                }
            }
        }
    },

    handleTimezoneChange: function (paTimezone) {
        this.model.set({
            'scheduleTimezone': paTimezone
        });
    },

    initializeTimeValues: function() {
        var days = [];
        var day1 = {
            active : false,
            id : 0,
            scheid: -1,
            start: "00:00:00",
            stop: "23:59:59"
        };
        var day2 = $.extend(true, {}, day1);
        day2.id = 1;

        var day3 = $.extend(true, {}, day1);
        day3.id = 2;

        var day4 = $.extend(true, {}, day1);
        day4.id = 3;

        var day5 = $.extend(true, {}, day1);
        day5.id = 4;

        var day6 = $.extend(true, {}, day1);
        day6.id = 5;

        var day7 = $.extend(true, {}, day1);
        day7.id = 6;

        days.push(day1);
        days.push(day2);
        days.push(day3);
        days.push(day4);
        days.push(day5);
        days.push(day6);
        days.push(day7);

        this.model.set({
            'schedules': days
        });

        this.model.trigger('change', this.model);
        $('#schedules_str').val(JSON.stringify(days));
    },

    allHoursSwop: function(paState) {
        var dayStart = '00:00:00';
        var dayStop = '23:59:59';
        var oldDays = this.model.get('schedules', []);
        var days = [];

        for (let i = 0; i < 7; i++) {
            let day = { active: false, id: i, scheid: -1, start: dayStart, stop: dayStop };

            if (oldDays.length > i) {
                day.active = oldDays[i].active || false;
                day.scheid = oldDays[i].scheid || -1;
                day.start = oldDays[i].start || dayStart;
                day.stop = oldDays[i].stop || dayStop;
            }

            days.push(day);
        }

        this.model.set({
            'schedules': days
        });

        this.model.trigger('change', this.model);
        $('#schedules_str').val(JSON.stringify(days));

        //Swop out with the all hours model
        if(paState) {
            $('#allhours_str').val('True');
            this.$('.days-select').addClass('disabled-days-select').removeClass('themed-color');
        }
        else
        //Swop out with the existing hour model
        {
            $('#allhours_str').val('False');
        }
    },

    allHourSchedule: function() {
        var hiddenControl = $('#divAllHours').html();

        if (hiddenControl) {
            hiddenControl = hiddenControl.trim();
        }

        if (hiddenControl == undefined || hiddenControl == null || hiddenControl == '' || hiddenControl == true || hiddenControl.toLowerCase() == 'true') {
            $('#allhours_str').val('True');

            return true;
        }
        else {
            $('#allhours_str').val('False');

            return false;
        }
    }
});

module.exports = ScheduleView;