/**
 * View for in-course reverification.
 *
 * This view is responsible for rendering the page
 * template, including any subviews (for photo capture).
 */
 var edx = edx || {};

 (function($, _, _s, Backbone, gettext, HtmlUtils) {
     'use strict';

     edx.verify_student = edx.verify_student || {};

     edx.verify_student.InCourseReverifyView = Backbone.View.extend({

         el: '#incourse-reverify-container',
         templateId: '#incourse_reverify-tpl',
         submitButtonId: '#submit',

         events: {
             'click #submit': 'submitPhoto'
         },

         initialize: function(obj) {
             _.mixin(_s.exports());

             this.errorModel = obj.errorModel || null;
             this.courseKey = obj.courseKey || null;
             this.platformName = obj.platformName || null;
             this.usageId = obj.usageId || null;


             this.model = new edx.verify_student.VerificationModel({
                 courseKey: this.courseKey,
                 checkpoint: this.usageId
             });

             this.listenTo(this.model, 'sync', _.bind(this.handleSubmitPhotoSuccess, this));
             this.listenTo(this.model, 'error', _.bind(this.handleSubmissionError, this));
         },

         render: function() {
             HtmlUtils.setHtml(
                this.el,
                HtmlUtils.template($(this.templateId).html())(
                    {
                        courseKey: this.courseKey,
                        platformName: this.platformName
                    }
                )
            );

            // Render the webcam view *after* the parent view
            // so that the container div for the webcam
            // exists in the DOM.
             this.renderWebcam();

             return this;
         },

         renderWebcam: function() {
             edx.verify_student.getSupportedWebcamView({
                 el: $('#webcam'),
                 model: this.model,
                 modelAttribute: 'faceImage',
                 submitButton: this.submitButtonId,
                 errorModel: this.errorModel
             }).render();
         },

         submitPhoto: function() {
            // disable the submit button to prevent multiple submissions.
             this.setSubmitButtonEnabled(false);
             this.model.save();
         },

         handleSubmitPhotoSuccess: function(redirect_url) {
            // Redirect back to the courseware at the checkpoint location
             window.location.href = redirect_url;
         },

         handleSubmissionError: function(xhr) {
             var errorMsg = gettext('An error has occurred. Please try again later.');

            // Re-enable the submit button to allow the user to retry
             this.setSubmitButtonEnabled(true);

             if (xhr.status === 400) {
                 errorMsg = xhr.responseText;
             }

             this.errorModel.set({
                 errorTitle: gettext('Could not submit photos'),
                 errorMsg: errorMsg,
                 shown: true
             });
         },
         setSubmitButtonEnabled: function(isEnabled) {
             $(this.submitButtonId)
                .toggleClass('is-disabled', !isEnabled)
                .prop('disabled', !isEnabled)
                .attr('aria-disabled', !isEnabled);
         }
     });
 }(jQuery, _, _.str, Backbone, gettext, edx.HtmlUtils));
