import {WebComponent} from '../../decorators';
import {
  VetproviehBasicRepeat,
  VetproviehBinding,
  VetproviehElement} from '../../core';
import {Indexable} from '../../interfaces';
import {ViewHelper} from '../../helpers';
import Sortable from 'sortablejs';

// eslint-disable-next-line new-cap
@WebComponent({
  template: VetproviehElement.template + `
  <style> .dragable { cursor: move} .small-td { width: 50px; }</style>
        <table class="table is-fullwidth">
          <thead>
          </thead>
          <tbody id="listElements">
          </tbody>
        </table>
    `,
  tag: 'vp-table',
})
/**
 * Vetprovieh-Table
 * Generates a Table with Headers to show
 */
export class VetproviehTable extends VetproviehBasicRepeat {
  /**
   * ConnectedCallback
   */
  public connectedCallback() {
    super.connectedCallback();
    const tbody = this.getByIdFromShadowRoot('listElements');
    if (tbody) {
      Sortable.create(tbody, {
        onEnd: (event) => {
          if (event.oldIndex !== event.newIndex &&
            event.oldIndex != undefined &&
            event.newIndex != undefined) {
            const movedObject = this.objects[event.oldIndex];
            const placedObject = this.objects[event.newIndex];

            const tempPosition = movedObject.position;
            movedObject.position = placedObject.position;
            placedObject.position = tempPosition;

            this.objects[event.oldIndex] = placedObject;
            this.objects[event.newIndex] = movedObject;

            let i = 0;
            this.objects.forEach((obj) => {
              obj.position = ++i;
            });

            this.clearAndRender();
          }
        },
      });
    }
  }

  /**
   * Getting Element by Index
   * @param {number} index
   * @return {HTMLElement | null | undefined}
   */
  getElementByIndex(index: number) : HTMLElement | null | undefined {
    const itemBox = this.getByIdFromShadowRoot('listElements');
    console.log(itemBox);
    const selector = `[data-index="${index == 0 ? '' : index}"]`;

    return itemBox?.querySelector(selector);
  }

  /**
   * Inserts Element to List
   * @param {any} dataItem
   * @param {number} index
   * @protected
   */
  protected _attachToList(dataItem: any, index = 0) {
    if (this.shadowRoot) {
      const item = {item: dataItem};
      const newListItem: HTMLElement = this._generateListItem(item);
      dataItem['index'] = index;
      ViewHelper.replacePlaceholders(newListItem, item);
      VetproviehBinding.bindFormElements(newListItem, item);

      const deleteBtn = this.deleteButtonFromItem(newListItem);
      if (deleteBtn) {
        (deleteBtn as Indexable)['data-id'] = index;
        deleteBtn.addEventListener('click', (event) => {
          this.delete((event.target as Indexable)['data-id']);
        });
      }

      this._attachParamsToLink(newListItem, item);

      const list = this.list;
      if (list) {
        list.appendChild(newListItem.children[0]);
      }
    }
  }

  /**
   * @private
   * Get Delete_Button from List_Item
   * @param {HTMLElement} listItem
   * @return {HTMLButtonElement}
   */
  private deleteButtonFromItem(listItem: HTMLElement): HTMLButtonElement {
    const tagSearch = 'button[data-action="delete"]';
    return listItem.querySelector(tagSearch) as HTMLButtonElement;
  }

  /**
   * Attaching Parameters to Link
   * @param {HTMLElement} newListItem
   * @param {any} dataItem
   */
  private _attachParamsToLink(newListItem: HTMLElement, dataItem: any) {
    const a = newListItem.getElementsByTagName('a')[0];
    if (a) {
      (a as any).params = dataItem;
    }
  }

  /**
 * Generate new Item for List which is based on the template
 * @param {any} dataItem
 * @param {boolean} activatedEventListener
 * @return {HTMLDivElement}
 * @private
 */
  protected _generateListItem(dataItem: any, activatedEventListener = false) {
    const newNode = document.importNode(this._listTemplate, true);
    const div = document.createElement('tbody');

    console.debug(dataItem);
    console.debug(activatedEventListener);

    div.appendChild(newNode);

    return div;
  }
}