/**
 * Allow users to upload an image using a file input.
 *
 * This uses HTML Media Capture so that iOS will
 * allow users to use their camera instead of choosing
 * a file.
 */

 var edx = edx || {};

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

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

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

        template: '#image_input-tpl',

        initialize: function( obj ) {
            this.$submitButton = obj.submitButton ? $( obj.submitButton ) : '';
            this.modelAttribute = obj.modelAttribute || '';
            this.errorModel = obj.errorModel || null;
        },

        render: function() {
            var renderedHtml = _.template( $( this.template ).html())({});
            $( this.el ).html( renderedHtml );

            // Set the submit button to disabled by default
            this.setSubmitButtonEnabled( false );

            this.$input = $( 'input.image-upload' );
            this.$preview = $( 'img.preview' );
            this.$input.on('change', _.bind( this.handleInputChange, this ) );

            // Initially hide the preview
            this.displayImage( false );

            return this;
        },

        handleInputChange: function( event ) {
            var files = event.target.files,
                reader = new FileReader();
            if ( files[0] && files[0].type.match( 'image.[png|jpg|jpeg]' ) ) {
                reader.onload = _.bind( this.handleImageUpload, this );
                reader.onerror = _.bind( this.handleUploadError, this );
                reader.readAsDataURL( files[0] );
            } else if ( files.length === 0 ) {
                this.handleUploadError( false );
            } else {
                this.handleUploadError( true );
            }
        },

        handleImageUpload: function( event ) {
            var imageData = event.target.result;
            this.model.set( this.modelAttribute, imageData );
            this.displayImage( imageData );
            this.setSubmitButtonEnabled( true );

            // Hide any errors we may have displayed previously
            if ( this.errorModel ) {
                this.errorModel.set({ shown: false });
            }

            this.trigger( 'imageCaptured' );
        },

        displayImage: function( imageData ) {
            if ( imageData ) {
                this.$preview
                    .attr( 'src', imageData )
                    .removeClass('is-hidden')
                    .attr('aria-hidden', 'false');
            } else {
                this.$preview
                    .attr( 'src', '' )
                    .addClass('is-hidden')
                    .attr('aria-hidden', 'true');
            }
        },

        handleUploadError: function( displayError ) {
            this.displayImage( null );
            this.setSubmitButtonEnabled( false );
            if ( this.errorModel ) {
                if ( displayError ) {
                    this.errorModel.set({
                        errorTitle: gettext( 'Image Upload Error' ),
                        errorMsg: gettext( 'Please verify that you have uploaded a valid image (PNG and JPEG).' ),
                        shown: true
                    });
                } else {
                    this.errorModel.set({
                        shown: false
                    });
                }
            }
            this.trigger( 'error' );
        },

        setSubmitButtonEnabled: function( isEnabled ) {
            this.$submitButton
                .toggleClass( 'is-disabled', !isEnabled )
                .prop( 'disabled', !isEnabled )
                .attr('aria-disabled', !isEnabled);
        }
    });

 })( jQuery, _, Backbone, gettext );
