var components = function () {

  Vue.component('show-entity-name', {
    props: ['name', 'item', 'methods', 'changed'],
    template: `
    <form class="form-inline">
      <div class="form-group">                     
        <button v-on:click="methods.removeProp(item, name)" 
        v-bind:data="changed"
         class="btn btn-outline-primary" type="button">-</button>        &nbsp;
        <label>{{ name }}</label>
      </div>
    </form>
    `
  });

  Vue.component('paginate-values', {
    props: ['name', 'item', 'methods', 'changed', 'context', 'values', 'schema', 'page'],
    template: `
      <div>
      <template v-if="values.length > 20 && values.length > (page) * 20" >
        <details>
          <summary>
            {{context.entities[values[page * 20].id].properties.name[0].value}} ...
          </summary>
            <show-value class="show-value" 
              v-for="i_index in 20"
              v-if="i_index + page * 20 < values.length" 
              v-bind:name="name"
              v-bind:item="item"
              v-bind:methods="methods"
              v-bind:changed="changed"
              v-bind:context="context"
              v-bind:values="values"
              v-bind:schema="schema"
              v-bind:val="values[i_index + page * 20]"
              v-bind:i_index="i_index"
              :key="i_index"
              >
          </show-value>
        </details>
        <paginate-values  
          v-bind:name="name"
          v-bind:item="item"
          v-bind:methods="methods"
          v-bind:changed="changed"
          v-bind:context="context"
          v-bind:values="values"
          v-bind:schema="schema"
          v-bind:page="page + 1">
          </paginate-values>
      </template>
      <template v-else-if="page === 0">
          <show-value class="show-value" 
            v-for="(val, i_index) in values"
            v-bind:name="name"
            v-bind:item="item"
            v-bind:methods="methods"
            v-bind:changed="changed"
            v-bind:context="context"
            v-bind:values="values"
            v-bind:schema="schema"
            v-bind:val="val"
            v-bind:i_index="i_index"
            :key="i_index"
           >
          </show-value>
       </template>
      </div>
     `
  });

  Vue.component('show-value', {
    props: ['name', 'item', 'methods', 'changed', 'context', 'values', 'schema', 'i_index', 'val'],
    template: `
    <div class="form-inline">                     
      <div class="form-group">
        <button 
          type="button" title="Delete this property"
          class="btn btn-outline-primary"
          v-on:click="methods.removeValue(values, i_index)">-
        </button>
      </div>      
    <!-- Input form -->
    <template v-if="schema.properties[name] && schema.properties[name].input === 'text'">
      <div class="form-group flex-grow">
        <input class="form-control flex-grow" v-model="val.value" type="text" v-on:keyup="methods.trigger_change_on_enter"/>
      </div>               
    </template>
    <!-- UNLINK button for linked props -->
    <template v-else-if="val && val.id && context.entities[val.id] && context.entities[val.id].properties.name">
    <div class="form-group">
      <a
        class="btn btn-outline-success" 
        v-on:click="methods.show_entity(val.id)" 
        v-bind:href="'#' + val.id">{{  context.entities[val.id].properties.name[0].value }}
      </a>
      <form class="form-inline" v-on:submit.prevent="methods.unlinkProp(val)">                     
        <button class="btn btn-outline-secondary" type="submit" text="Unlink">
          <i class="fa fa-unlink"></i>
        </button>
      </form>
      </div>
    </template>
    <!-- FALLBACK - DISPLAY -->
    <template v-else>
      <div class="form-group flex-grow">
        <input
          class="form-control flex-grow" v-model="val.value" type="text"  
          v-on:keyup="methods.trigger_change_on_enter"/>
      </div>
    </template>
    <template v-if="schema.properties[name] && schema.properties[name].input === 'link' " >
      <div class="form-group">
        <form 
          class="form-inline"  
          v-on:submit.prevent="methods.linkProp(val)" 
          v-if="!val.id">      
          <button class="btn btn-outline-primary" type="submit">
            <i class="fa fa-link"></i>
          </button>        
          <select class="custom-select" v-model="val.selection">
            <option value="" :selected="true">Select or create new property</option>
            <template v-for="(link_item, link_id) in context.entities">
              {{link_id}}
                <option 
                  v-for="other_name in link_item.properties.name" 
                  v-if="(!val.id || link_id != val.id) && schema.properties[name] && link_item.properties.type && schema.properties[name].type.includes(link_item.properties.type[0].value)" 
                  v-bind:value="link_id">{{ other_name.value  }}</option>
            </template>
          </select>
        </form>
        <form class="form-inline" 
          v-on:submit.prevent="methods.linkToNew(val)"
          v-if="!val.id && schema.properties[name] && schema.properties[name].type && schema.properties[name].type.filter(t => {return (schema.types[t] && schema.types[t].create)}).length > 0">      
          <div class="form-group">
            <button 
              class="btn btn-outline-primary" 
              type="submit" text="Link to a new contextual item">New</button>               
            <select 
              class="custom-select" 
              v-model="val.new_type">
                <option v-for="type in schema.properties[name].type.filter(type => {return (schema.types[type] && schema.types[type].create)})">{{ type  }}</option>                        
            </select>
          </div>
        </form>
        </div>
      </template>    
    </div>      
    `
  });

  Vue.component('show-props', {
    props: ['item', 'schema', 'context', 'type', 'methods', 'changed'],
    template: `  
    <div class="table-responsive">        
      <table class="table ">
        <tr v-for="(values, name) in item.properties" v-bind:data="changed">
          <td style="width: 15%" class="show-props-table-def">
            <show-entity-name v-bind:name="name"  v-bind:item="item" v-bind:methods="methods" v-bind:changed="changed"></show-entity-name>
          </td>
          <td style="width: 5%">
            <form class="form-inline" v-on:submit.prevent="methods.addProp(item, name)" style='display:inline;'>                     
              <button class="btn btn-outline-primary" type="submit">+</button>
            </form>
          </td>
          <td style="width: 80%">               
            <!-- Put in summary here / Paginate-->
            <paginate-values 
              v-bind:name="name"  
              v-bind:item="item" 
              v-bind:methods="methods" 
              v-bind:changed="changed" 
              v-bind:context="context" 
              v-bind:values="values"
              v-bind:schema="schema"
              v-bind:page="0"> 
            </paginate-values>
          </td>
        </tr>
      </table>
    </div>
     `
  });
}