define([
    'Global',
    'PatientContext',
	'PatientView',
	'CalendarFilterView',
	'CalendarView',
	'VAACCollapsibleView',
    'AppointmentRequest',
    'Text!../html/templates/booking-header.html'
],
    function (Global, PatientContext, PatientView, CalendarFilterView, CalendarView, VAACCollapsibleView, AppointmentRequest, bookingHeaderTemplate) {
        'use strict';

        var BookingHeaderView = Backbone.View.extend({
            tagName: 'div',
            id: 'calendar-tabs',
            attributes: {
				'class': 'ui-navbar ui-mini'
			},
            initialize: function () {
	            this.template = _.template(bookingHeaderTemplate);
				this.documentData = $(document).data();
            },

            render: function () {
				var $container = getSubHeaderLeft();

                this.$el
                    .empty()
                    .append(this.template);

                $container
                    .empty()
                    .append(this.$el)
                    .trigger('create');

                this.$patientButton = $('#patient-button');
                this.patientButtonData = this.$patientButton.data();

                this.patientButtonData.disabled = true;

                this.$calendarButton = $('#calendar-button');
                this.calendarButtonData = this.$calendarButton.data();
                this.calendarButtonData.active = true;

                if (PatientContext.instance().isValid()) {
                    this.$patientButton.removeClass('ui-disabled');
                    this.patientButtonData.disabled = false;

					if (this.documentData.patientView) {
						this.showPatientView();
					} else {
						this.documentData.patientView = false;
					}
                } else {
					this.documentData.patientView = false;
				}

				if (!this.documentData.patientView) {
					this.showCalendarView(null, true);
				}

				this.delegateEvents();

                return this;
            },

            events: {
                'tap #patient-button': 'showPatientView',
                'tap #calendar-button': 'showCalendarView',
				'keydown li a': 'handleKeyDown'
            },

			handleKeyDown: function (e) {
				if (e.which === 13) {
                    e.preventDefault();
					$(e.currentTarget).trigger('tap');
				}
			},

            showPatientView: function (e) {
	            if (e) {
		            e.preventDefault();
	            }

                if (!this.patientButtonData.disabled && !this.patientButtonData.active) {
                    this.patientButtonData.active = true;
                    this.calendarButtonData.active = "";

					this.documentData.patientView = true;

                    new PatientView().render();

					this.$patientButton.addClass('ui-btn-active');
					this.$calendarButton.removeClass('ui-btn-active');
                }
            },

            showCalendarView: function (e, forceRender) {
	            if (e) {
		            e.preventDefault();
	            }

				if (!this.calendarButtonData.active || forceRender) {
                    this.patientButtonData.active = "";
                    this.calendarButtonData.active = true;

					this.documentData.patientView = false;

                    new CalendarFilterView().render();
					new CalendarView().render(true);

					if (AppointmentRequest.instance().isValid()) {
						new VAACCollapsibleView().render();
					}

					this.$patientButton.removeClass('ui-btn-active');
					this.$calendarButton.addClass('ui-btn-active');
                }
            }
        });
		
		return BookingHeaderView;
    }
);