{% trans_default_domain 'admin' %}

<input type="hidden" id="{{ form.vars.id }}" name="{{ form.vars.full_name }}"/>

{% set object = form.vars.sonata_admin.admin.subject %}
{% set mapping = object.taxonomyMapping %}
{% if object.isCategoriesFieldMapped %}
  <table class="table mapping-table mapping-taxonomy-table">
    <thead>
      <tr>
        <th class="original">{{ 'mapping-taxonomy.original'|trans }}</th>
        <th style="width:20px"></th>
        <th>{{ 'mapping-taxonomy.mapped'|trans }}</th>
        <th style="width:20px"></th>
      </tr>
    </thead>
    <tbody class="table-striped">
      {% set currentFieldName = '' %}
      {% for originName, mappedObject in mapping %}
        {% if mappedObject.fieldName and mappedObject.fieldName != currentFieldName %}
          {% set currentFieldName = mappedObject.fieldName %}
          <tr>
            <td class="category-group"><label>{{ 'mapping-taxonomy.category-group'|trans({'%name%': mappedObject.fieldName}) }}</label></td>
            <td colspan="3"></td>
          </tr>
        {% endif %}
        <tr>
          <td class="original">{{originName}}</td>
          <td><i class="arrow-icon fa fa-arrow-circle-right" title="{{ 'mapping-taxonomy.arrowTitle'|trans }}"></i></td>
          <td class="mapped">
            <input type="text" name="taxonomy[{{originName}}][]" class="form-control category-selector" value="{{mappedObject.mappedCategoryIds|join(',')}}"/>
          </td>
          <td><i class="clear-icon fa fa-ban" title="{{ 'mapping-taxonomy.clearTitle'|trans }}"></i></td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
  <center>
    <button type="button" class="btn btn-default create-missing-categories">
      {{ 'mapping-taxonomy.create-missing-categories'|trans }}
    </button>
  </center>
{% else %}
  <div class="alert alert-info">{{ 'mapping-taxonomy.alert'|trans }}</div>
{% endif %}

<script>
  jQuery(document).ready(function() {

    var taxonomy = {{ form.vars.attr["data-options"]|raw }};
    var mappingOptionNameToId = {}
    var formData = [{ id: "", text: t('mapping_taxonomy.selectCategory'), disabled: true}]

    function recursivelyAddOption(category, parentOption)
    {
      if (!category.options) return;
      for(var i = 0; i < category.options.length; i++)
      {
        var option = category.options[i];
        var optionName = parentOption ? parentOption + ' ↣ ' : '';
        optionName += option.name;
        mappingOptionNameToId[option.name.replace(/,\s*/g, ' ').toLowerCase()] = option.id
        if (option.customId) mappingOptionNameToId[option.customId.replace(/,\s*/g, ' ').toLowerCase()] = option.id
        formData.push({id: option.id, text: optionName});
        if (option.subcategories)
        {
          for(var j = 0; j < option.subcategories.length; j++)
          {
            recursivelyAddOption(option.subcategories[j], optionName);
          }
        }
      }
    }
    for(var k = 0; k < taxonomy.length; k++) recursivelyAddOption(taxonomy[k], null);

    $(".category-selector").select2({
        data: formData,
        createSearchChoice:function(term, data) {
            if ($(data).filter(function() {
                return this.text.localeCompare(term)===0;
            }).length===0) {
              return {id: `@create:${term}`, text: t('js.mapping_taxonomy.createTerm', {term: term}) };
            }
        },
        multiple: true
    });

    // on arrow click, use the original name
    $('.mapping-taxonomy-table .arrow-icon').click(function() {
      const $parent = $(this).closest('tr')
      let originCategoryName = $parent.find('.original').text()
                                      .replace(/^\w/, c => c.toUpperCase()) // capitalize
                                      .replace(/,\s*/g, ' ') // remove coma cause it's the array delimiter for select2
      let newCategoryId = originCategoryName
      let newCategoryIdIfCreated = `@create:${originCategoryName}`
      if (mappingOptionNameToId[originCategoryName.toLowerCase()]) {
        newCategoryId = mappingOptionNameToId[originCategoryName.toLowerCase()]
      }
      else if (Object.keys(formData).filter(v => [newCategoryId, newCategoryIdIfCreated].includes(v)).length === 0) {
        newCategoryId = newCategoryIdIfCreated
        formData.push({id: newCategoryId, text: t('js.mapping_taxonomy.createTerm', {term: originCategoryName}) });
      }        
      const input = $parent.find('.category-selector:not(.select2-container)')
      input.val(newCategoryId).trigger('change');
    });

    $('.mapping-taxonomy-table .clear-icon').click(function() {
      $(this).parent().parent().find('.category-selector:not(.select2-container)').val("").trigger('change');
    });

    $('.create-missing-categories').click(() => {
      $('.mapping-taxonomy-table .select2-choices').each(function() { 
        // if no choice selected then click the arrow 
        if ($(this).find('.select2-search-choice').length == 0) {
          $(this).closest('tr').find('.arrow-icon').trigger('click')
        } 
      })
    })

  });
</script>

<style>
  td.category-group {
    text-transform: uppercase;
  }
</style>