{% extends "views/layouts/base.html" %}
{% block yield %}
<script src="{{ mavensmate.ui.getStaticResourcePath() }}/editor/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="{{ mavensmate.ui.getStaticResourcePath() }}/editor/mode-java.js" type="text/javascript" charset="utf-8"></script>

<div class="slds-grid" id="settings-wrapper">
	<div class="slds-container--medium">
		<div id="form" class="tab-pane active">
			<div class="slds-form--stacked">
				<fieldset style="padding-top:10px;">
					<!-- this is only here to prevent slds from auto-selecting the first input -->
					<input class="slds-input" class="form-control" type="text" style="display: none;"/>

					{% for settingKey, settingValue in userSettings %}
						{% if defaultSettings[settingKey] %}
							<div class="slds-form-element" id="{{ settingKey }}-group" style="margin-bottom:20px;">
								<div class="slds-form-element__control">
									<!-- string or integer -->
									{% if defaultSettings[settingKey].type === 'string' || defaultSettings[settingKey].type === 'integer' %}
										<h3 class="slds-section-title--divider">{{ defaultSettings[settingKey].title }} ({{ settingKey }})</h3>

										{% if defaultSettings[settingKey].description %}
											<div class="slds-box slds-theme--info slds-m-bottom--small slds-m-top--small">
											  <span class="slds-icon_container slds-p-right--xx-small">
											    <svg aria-hidden="true" class="slds-icon slds-icon--small">
											      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/app/static/lds/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
											    </svg>
											  </span>
											  {{ defaultSettings[settingKey].description }}
											  {% if defaultSettings[settingKey].example %}
											  	<br/><br/><b>Example:</b><br/>
											  	{{ defaultSettings[settingKey].example|safe }}
											  {% endif %}
											</div>
										{% endif %}
										<input class="slds-input setting" class="form-control" id="{{ settingKey }}" type="text" value="{{ settingValue }}"/>
									{% endif %}
									<!-- array or object -->
									{% if defaultSettings[settingKey].type === 'array' || defaultSettings[settingKey].type === 'object' %}
										<h3 class="slds-section-title--divider">{{ defaultSettings[settingKey].title }} ({{ settingKey }})</h3>
										{% if defaultSettings[settingKey].description %}
											<div class="slds-box slds-theme--info slds-m-bottom--small slds-m-top--small">
											  <span class="slds-icon_container slds-p-right--xx-small">
											    <svg aria-hidden="true" class="slds-icon slds-icon--small">
											      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/app/static/lds/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
											    </svg>
											  </span>
											  {{ defaultSettings[settingKey].description }}
											  {% if defaultSettings[settingKey].example %}
											  	<br/><br/><b>Example:</b><br/>
											  	{{ defaultSettings[settingKey].example|safe }}
											  {% endif %}
											</div>
										{% endif %}
										<div style="height:110px;">
											<textarea data-editor="java" rows="15" class="form-control setting" id="{{ settingKey }}">{{ JSON.stringify(settingValue, null, 2) }}</textarea>
										</div>
									{% endif %}
									<!-- boolean -->
									{% if defaultSettings[settingKey].type === 'boolean' %}
									    <label class="slds-checkbox" for="{{ settingKey }}">
									      <input type="checkbox" class="setting-chk" {% if settingValue === true %}checked="checked"{% endif %} id="{{ settingKey }}" data-toggle="checkbox">
									      <span class="slds-checkbox--faux"></span>
									      <span class="slds-form-element__label">{{ defaultSettings[settingKey].title }} ({{ settingKey }})</span>
									    </label>
									    {% if defaultSettings[settingKey].description %}
									    	<div class="slds-box slds-theme--info slds-m-bottom--small slds-m-top--small">
									    	  <span class="slds-icon_container slds-p-right--xx-small">
									    	    <svg aria-hidden="true" class="slds-icon slds-icon--small">
									    	      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/app/static/lds/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
									    	    </svg>
									    	  </span>
									    	  {{ defaultSettings[settingKey].description }}
									    	  {% if defaultSettings[settingKey].example %}
									    	  	<br/><br/><b>Example:</b><br/>
									    	  	{{ defaultSettings[settingKey].example|safe }}
									    	  {% endif %}
									    	</div>
									    {% endif %}
									{% endif %}
								</div>
							</div>
						{% endif %}
					{% endfor %}
				</fieldset>
			</div>
		</div>
	</div>
</div>
{% endblock %}

{% block body_js %}
	<script>
		'use strict';

		$(function() {
			$('textarea[data-editor]').each(function () {
        var textarea = $(this);
        var wrappingDiv = textarea.parent();
        var editDiv = $('<div>', {
            position: 'absolute',
            width: wrappingDiv.width(),
            height: wrappingDiv.height(),
            'class': textarea.attr('class')
        }).insertBefore(textarea);
        textarea.css('display', 'none');
        var editor = ace.edit(editDiv[0]);
        editor.renderer.setShowGutter(false);
        editor.getSession().setValue(textarea.val(), -1);
        editor.getSession().setMode('ace/mode/javascript');
        editor.getSession().setUseWrapMode(true);
        editor.setFontSize(14);
        editor.getSession().setTabSize(2);
        editor.resize();
        editor.on('blur', function() {
        	textarea.val(editor.getSession().getValue());
        	var settingValue = textarea.val();
        	var settingKey = textarea.attr('id');
        	updateSettings(settingValue, settingKey);
        });
    	});

			$( 'input.setting, textarea.setting' ).blur(function() {
			  var settingValue = $(this).val();
			  var settingKey = $(this).attr('id');
			  updateSettings(settingValue, settingKey);
			});

			$('.setting-chk').on('change.radiocheck', function() {
				var settingValue = $(this).is(':checked');
				var settingKey = $(this).attr('id');
				console.log(settingValue);
				console.log(settingKey);
				updateSettings(settingValue, settingKey);
			});

			$('div.tab-content').focus();
		});

		function updateSettings(settingValue, settingKey) {
	 		var opts = {
	 			async: false,
	 			ajax: {
		 			type: 'POST',
					url: '{{ mavensmate.ui.getBaseUrl() }}/app/settings',
		 			data: JSON.stringify({
		 				settingValue: settingValue,
		 				settingKey: settingKey
		 			})
	 			}
	 	 	};

	 		mavensmate.request(opts)
	 			.then(function(response) {
	 				console.log(response);
	 				showToast('Settings updated', 'success');
	 			})
	 			.catch(function(err) {
	 				console.error('could not update settings', err);
	 			});
		}
	</script>
{% endblock %}