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

<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="Project Details" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" data-aljs-show="tab-default-1">Project Details</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="false" aria-controls="tab-default-2" data-aljs-show="tab-default-2">Advanced</a></li>
      {% if !origin %}
      <li class="slds-tabs--scoped__item slds-text-heading--label" title="Metadata" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-3" data-aljs-show="tab-default-3">Metadata</a></li>
      {% endif %}
  </ul>
  <div id="tab-default-1" class="slds-tabs--scoped__content slds-hide" role="tabpanel">

  	<form class="slds-form--stacked">
  		<input type="hidden" value="{{ accessToken }}" id="accessToken"/>
  		<input type="hidden" value="{{ refreshToken }}" id="refreshToken"/>
  		<input type="hidden" value="{{ instanceUrl }}" id="instanceUrl"/>

  		<fieldset>
  			<div class="slds-form-element">
  			  <label class="slds-form-element__label" for="inputSample2">Workspace</label>
  			  <div class="slds-form-element__control">
  			  	<select id="workspace" class="slds-select"
  			  		data-placeholder="Select a workspace" data-none-selected-text="No workspace selected (To configure workspaces, set your mm_workspace setting in your MavensMate text editor plugin settings)" data-size="5">
  			  		{% for m in mavensmate.ui.getWorkspaces() %}
  			  			<option value="{{ m }}">{{ m }}</option>
  			  		{% endfor %}
  			  	</select>
  			  </div>
  			</div>

  			<div class="slds-form-element slds-m-top--medium large">
  				<label class="slds-form-element__label" for="inputSample2">Project Name</label>
  				<div class="slds-form-element__control">
  					<input class="slds-input" placeholder="Project Name" type="text" id="pn" {% if origin %}value="{{mavensmate.ui.getPathBaseName(origin)}}" disabled="disabled"{% endif %}>
  				</div>
  			</div>

  			<div class="slds-form-element slds-m-top--medium large">
  				<label class="slds-form-element__label" for="inputSample2">Salesforce.com Username</label>
  				<div class="slds-form-element__control">
  					<input class="slds-input" placeholder="Salesforce.com Username" type="text" id="un" value="{{session.username}}" disabled="disabled">
  				</div>
  			</div>

  		</fieldset>
  	</form>
  </div>
  <div id="tab-default-2" class="slds-tabs--scoped__content slds-hide" role="tabpanel">
  	<div class="slds-form--stacked">
			<div class="slds-box slds-theme--info slds-m-bottom--medium">
        <p>
  			 Select only those metadata types you need for your project. The default list of metadata types is controlled by the "mm_default_subscription" setting. You can update your project's metadata subscription at any time in the "Edit Project" screen.
        </p>
			</div>

      <fieldset>
        <div class="slds-form-element">
          <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 Subscription</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>
        </div>
      </fieldset>
  	</div>
  </div>
  <div id="tab-default-3" class="slds-tabs--scoped__content slds-hide" role="tabpanel">
    {% include 'views/partials/metadata_tree.html' %}
  </div>
</div>

{% if origin %}
<input type="hidden" value="{{ origin }}" id="origin"/>
{% endif %}

{% endblock %}

{% block buttons %}
	<button class="slds-button slds-button--brand" onclick="newProject()">Create Project</button>
	{% include 'views/partials/cancel_button.html' %}
{% endblock %}

{% block body_js %}

	<script type="text/javascript">
		var metadataTree;

		$(function() {
			$('[data-aljs="tabs"]').tabs();

      metadataTree = new mavensmate.MetadataTree({
        metadata: {{ session.metadataTypes|json|safe }}
      });
      metadataTree.renderBuffered();

      var unselectedItems = [
        {% for m in session.metadataTypes %}
          {% if mavensmate.ui.getDefaultSubscription().indexOf(m.xmlName) === -1 %}
            {
              id: '{{ m.xmlName }}',
              label: '{{ m.xmlName }}'
            },
          {% endif %}
        {% endfor %}
      ];

      var selectedItems = [
        {% for m in session.metadataTypes %}
          {% if mavensmate.ui.getDefaultSubscription().indexOf(m.xmlName) >= 0 %}
          {
            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() {
        sortSubscription();
      });

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

		});

    function sortSubscription() {
      // 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'));
    }

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

		function newProject() {
			var opts = {
				ajax: {
					type: 'POST',
					url: '{{ mavensmate.ui.getBaseUrl() }}/app/project{% if origin %}/existing{% endif %}',
					data: JSON.stringify({
						name: $('#pn').val().trim(),
						accessToken: $('#accessToken').val(),
						refreshToken: $('#refreshToken').val(),
						instanceUrl: $('#instanceUrl').val(),
						{% if !origin %}
            package: metadataTree.getPackage(),
            {% endif %}
						workspace: $('#workspace').val(),
						subscription: getSubscription(),
						origin: $('#origin').val()
					})
				},
				message: {
					label: 'Creating new MavensMate project...',
					detail: 'This could take a while depending on the amount of metadata selected. Thanks for being patient! :)'
				}
		 	};

			mavensmate.request(opts)
				.then(function(response) {
					var newProjectId = response.result.id;
					window.location = '{{ mavensmate.ui.getBaseUrl() }}/app/project/'+newProjectId+'?pid='+newProjectId+'&new=1';
				})
				.catch(function(err) {
					console.error('could not create project', err);
				})
				.finally(function() {
					hideLoading();
				});
		}
	</script>
{% endblock %}