text: /*global jQuery, Backbone, _, woocommerce_admin_api_keys, wcSetClipboard, wcClearClipboard */
  (function( $ ) {
  
  	var APIView = Backbone.View.extend({
  		/**
  		 * Element
  		 *
  		 * @param {Object} '#key-fields'
  		 */
  		el: $( '#key-fields' ),
  
  		/**
  		 * Events
  		 *
  		 * @type {Object}
  		 */
  		events: {
  			'click input#update_api_key': 'saveKey'
  		},
  
  		/**
  		 * Initialize actions
  		 */
  		initialize: function(){
  			_.bindAll( this, 'saveKey' );
  		},
  
  		/**
  		 * Init jQuery.BlockUI
  		 */
  		block: function() {
  			$( this.el ).block({
  				message: null,
  				overlayCSS: {
  					background: '#fff',
  					opacity: 0.6
  				}
  			});
  		},
  
  		/**
  		 * Remove jQuery.BlockUI
  		 */
  		unblock: function() {
  			$( this.el ).unblock();
  		},
  
  		/**
  		 * Init TipTip
  		 */
  		initTipTip: function( css_class ) {
  			$( document.body )
  				.on( 'click', css_class, function( evt ) {
  					evt.preventDefault();
  					if ( ! document.queryCommandSupported( 'copy' ) ) {
  						$( css_class ).parent().find( 'input' ).focus().select();
  						$( '#copy-error' ).text( woocommerce_admin_api_keys.clipboard_failed );
  					} else {
  						$( '#copy-error' ).text( '' );
  						wcClearClipboard();
  						wcSetClipboard( $( this ).prev( 'input' ).val().trim(), $( css_class ) );
  					}
  				} )
  				.on( 'aftercopy', css_class, function() {
  					$( '#copy-error' ).text( '' );
  					$( css_class ).tipTip( {
  						'attribute':  'data-tip',
  						'activation': 'focus',
  						'fadeIn':     50,
  						'fadeOut':    50,
  						'delay':      0
  					} ).focus();
  				} )
  				.on( 'aftercopyerror', css_class, function() {
  					$( css_class ).parent().find( 'input' ).focus().select();
  					$( '#copy-error' ).text( woocommerce_admin_api_keys.clipboard_failed );
  				} );
  		},
  
  		/**
  		 * Create qrcode
  		 *
  		 * @param {string} consumer_key
  		 * @param {string} consumer_secret
  		 */
  		createQRCode: function( consumer_key, consumer_secret ) {
  			$( '#keys-qrcode' ).qrcode({
  				text: consumer_key + '|' + consumer_secret,
  				width: 120,
  				height: 120
  			});
  		},
  
  		/**
  		 * Save API Key using ajax
  		 *
  		 * @param {Object} e
  		 */
  		saveKey: function( e ) {
  			e.preventDefault();
  
  			var self = this;
  
  			self.block();
  
  			Backbone.ajax({
  				method:   'POST',
  				dataType: 'json',
  				url:      woocommerce_admin_api_keys.ajax_url,
  				data:     {
  					action:      'woocommerce_update_api_key',
  					security:    woocommerce_admin_api_keys.update_api_nonce,
  					key_id:      $( '#key_id', self.el ).val(),
  					description: $( '#key_description', self.el ).val(),
  					user:        $( '#key_user', self.el ).val(),
  					permissions: $( '#key_permissions', self.el ).val()
  				},
  				success: function( response ) {
  					$( '.wc-api-message', self.el ).remove();
  
  					if ( response.success ) {
  						var data = response.data;
  
  						$( 'h2, h3', self.el ).first().append( '<div class="wc-api-message updated"><p>' + data.message + '</p></div>' );
  
  						if ( 0 < data.consumer_key.length && 0 < data.consumer_secret.length ) {
  							$( '#api-keys-options', self.el ).remove();
  							$( 'p.submit', self.el ).empty().append( data.revoke_url );
  
  							var template = wp.template( 'api-keys-template' );
  
  							$( 'p.submit', self.el ).before( template({
  								consumer_key:    data.consumer_key,
  								consumer_secret: data.consumer_secret
  							}) );
  							self.createQRCode( data.consumer_key, data.consumer_secret );
  							self.initTipTip( '.copy-key' );
  							self.initTipTip( '.copy-secret' );
  						} else {
  							$( '#key_description', self.el ).val( data.description );
  							$( '#key_user', self.el ).val( data.user_id );
  							$( '#key_permissions', self.el ).val( data.permissions );
  						}
  					} else {
  						$( 'h2, h3', self.el )
  							.first()
  							.append( '<div class="wc-api-message error"><p>' + response.data.message + '</p></div>' );
  					}
  
  					self.unblock();
  				}
  			});
  		}
  	});
  
  	new APIView();
  
  })( jQuery );
  