{% extends "views/layouts/base.html" %}
{% block yield %}

{% if isUpdate %}
	<script>
		$(function() {
			showToast('Successfully updated project credentials', 'success', null, 5000);
		});
	</script>
{% endif %}

<div class="slds-tabs--scoped" data-aljs="tabs">
  <ul class="slds-tabs--scoped__nav" role="tablist">
      <li class="slds-tabs--scoped__item slds-text-heading--label" title="Subscription" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="0" aria-selected="false" aria-controls="tab-default-1" data-aljs-show="tab-default-1">Subscription</a></li>
      <li class="slds-tabs--scoped__item slds-text-heading--label" title="Advanced" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="-1" aria-selected="true" aria-controls="tab-default-2" data-aljs-show="tab-default-2">Project Metadata</a></li>
  </ul>
  <div id="tab-default-1" class="slds-tabs--scoped__content slds-hide" role="tabpanel">
  	<div class="slds-form--stacked">
  		<fieldset>
  			<div class="slds-form-element slds-m-bottom--medium" >
			    <div class="slds-picklist--draggable slds-grid" data-aljs="multi-select" id="project-subscription">
		        <div class="slds-form-element">
		            <span class="slds-form-element__label" aria-label="select-1">Org Metadata</span>
		            <div class="slds-picklist slds-picklist--multi" data-aljs-multi-select="unselected">
		                <ul class="slds-picklist__options slds-picklist__options--multi shown" id="ul-org-metadata"></ul>
		            </div>
		        </div>
		        <div class="slds-grid slds-grid--vertical">
		            <button class="slds-button slds-button--icon-container" data-aljs-multi-select="unselect">
		                <svg aria-hidden="true" class="slds-button__icon">
		                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ mavensmate.ui.getStaticResourcePath() }}/lds/assets/icons/utility-sprite/svg/symbols.svg#left"></use>
		                </svg>
		                <span class="slds-assistive-text">Pick list</span>
		            </button>
		            <button class="slds-button slds-button--icon-container" data-aljs-multi-select="select">
		                <svg aria-hidden="true" class="slds-button__icon">
		                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ mavensmate.ui.getStaticResourcePath() }}/lds/assets/icons/utility-sprite/svg/symbols.svg#right"></use>
		                </svg>
		                <span class="slds-assistive-text">Pick list</span>
		            </button>
		        </div>
		        <div class="slds-form-element">
		            <span class="slds-form-element__label" aria-label="select-2">Project Metadata</span>
		            <div class="slds-picklist slds-picklist--multi" data-aljs-multi-select="selected">
		                <ul class="slds-picklist__options slds-picklist__options--multi shown" id="ul-project-metadata"></ul>
		            </div>
		        </div>

			    </div>
  			</div>
  		</fieldset>
  	</div>
  </div>
  <div id="tab-default-2" class="slds-tabs--scoped__content slds-hide" role="tabpanel">
  {% include 'views/partials/metadata_tree.html' %}
  </div>
</div>

{% endblock %}

{% block buttons %}
	<button class="slds-button slds-button--brand" onclick="updateProject()">Update Project</button>
	<button class="slds-button slds-button--neutral" onclick="indexOrg()">Refresh Metadata Index</button>
{% endblock %}

{% block body_js %}
	<script>
		var metadataTree;

		$(function() {
	    $('[data-aljs="tabs"]').tabs({
	    	defaultTabId: 'tab-default-2'
	    });

	    var selectedItems = [
	       {% for m in mavensmate.ui.getMetadataObjects(project) %}
	       	{% if project.settings.subscription.indexOf(m.xmlName) >= 0 %}
	       		{
	       			id: '{{ m.xmlName }}',
	       			label: '{{ m.xmlName }}'
	       		},
	       	{% endif %}
	       {% endfor %}
	    ];

	    var unselectedItems = [
	    	{% for m in mavensmate.ui.getMetadataObjects(project) %}
	    		{% if project.settings.subscription.indexOf(m.xmlName) === -1 %}
	    			{
	    				id: '{{ m.xmlName }}',
	    				label: '{{ m.xmlName }}'
	    			},
	    		{% endif %}
	    	{% endfor %}
	    ];
	    $('#project-subscription').multiSelect({
	    	unselectedItems: unselectedItems,
	      selectedItems: selectedItems
	    });

	    $('#project-subscription').find('[data-aljs-multi-select="unselect"]').on('click', function() {
	    	updateSubscription();
	    });

	    $('#project-subscription').find('[data-aljs-multi-select="select"]').on('click', function() {
	    	updateSubscription();
	    });

	    if ({{ project.hasIndexedMetadata() }}) {
	    	metadataTree = new mavensmate.MetadataTree();
	    	metadataTree.render();
	    } else {
	    	indexOrg();
	    }
		});

		function updateSubscription() {
			// sort the dom nodes
			var $orgMetadataLi = $('#ul-org-metadata li');
			var $projectMetadataLi = $('#ul-project-metadata li');

			$orgMetadataLi.sort(metadataTypeSort);
			$orgMetadataLi.detach().appendTo($('#ul-org-metadata'));

			$projectMetadataLi.sort(metadataTypeSort);
			$projectMetadataLi.detach().appendTo($('#ul-project-metadata'));

			// update the project
			var selectedMetadataTypes = [];
			_.each($('#project-subscription').multiSelect('getSelectedItems'), function(item) {
				selectedMetadataTypes.push(item.id);
			});
			selectedMetadataTypes.sort();

			var opts = {
				async: false,
				ajax: {
					type: 'POST',
					url: "{{ mavensmate.ui.getBaseUrl() }}/app/project/{{project.settings.id}}/subscription?pid={{project.settings.id}}",
					data: JSON.stringify({
			    	subscription: selectedMetadataTypes
					})
				},
				message: {
					label: 'Updating project subscription...'
				}
		 	};

			mavensmate.request(opts)
				.then(function(response) {
					showToast(response.message, 'success');
					// todo: custom action; indexOrg(true);
				})
				.catch(function(err) {
					console.error('could not update subscription', err);
				})
				.finally(function() {
					hideLoading();
				});
		}

		function updateProject() {
			var opts = {
				ajax: {
					type: 'POST',
					url: '{{ mavensmate.ui.getBaseUrl() }}/app/project/{{project.settings.id}}?pid={{project.settings.id}}',
					data: JSON.stringify({
						package: metadataTree.getPackage()
					})
				},
				message: {
					label: 'Updating MavensMate project...'
				}
		 	};

			mavensmate.request(opts)
				.then(function(response) {
					showToast('Project updated successfully', 'success');
				})
				.catch(function(err) {
					console.error('could not update project', err);
				})
				.finally(function() {
					hideLoading();
				});
		}

		function indexOrg() {
			var opts = {
				ajax: {
					type: 'POST',
					url: "{{ mavensmate.ui.getBaseUrl() }}/app/project/{{project.settings.id}}/index"
				},
				message: {
					label: 'Updating metadata index...',
					detail: ' This operation can take a few minutes in large orgs. To minimize indexing time, limit your project\'s subscription to only those metadata types you absolutely need.<br/><br/>Thanks for being patient! :)'
				}
		 	};

			mavensmate.request(opts)
				.then(function(response) {
					if (!metadataTree) {
						metadataTree = new mavensmate.MetadataTree();
						metadataTree.render();
					} else {
						metadataTree.dynatree.reload();
					}
					showToast('Project metadata index updated successfully', 'success');
				})
				.catch(function(err) {
					console.error('could not update index', err);
				})
				.finally(function() {
					hideLoading();
				});
		}
	</script>

{% endblock %}