import { createOverrideContext } from 'aurelia-framework';
import 'select2';
import { UIInternal } from '../../../utils/ui-internal';

var MultipleSelection = jQuery.fn.select2.amd.require('select2/selection/multiple');

export class CustomMultipleSelection extends MultipleSelection {
  constructor($element, options) {
    super($element, options)
  }

  selectionContainer() {
    let html = `<template><ui-button size="sm" icon="digi-cross" class="select2-selection__choice__remove" type="tool"></ui-button></template>`;
    let view = UIInternal.compileTemplate(html, this, createOverrideContext(this));
    var $container = $(
      '<li class="select2-selection__choice">' +
      (view as any).firstChild.outerHTML +
      '<span class="select2-selection__choice__display"></span>' +
      '</li>'
    );
    return $container;
  }
}
