/**
@license
Copyright (c) 2022 trading_peter
This program is available under Apache License Version 2.0
*/

import { LitElement, html, css } from 'lit';
import Sortable from 'sortablejs/modular/sortable.core.esm.js';

class TpSortable extends LitElement {
  static get styles() {
    return [
      css`
        :host {
          display: block;
          user-select: none;
        }
      `
    ];
  }

  render() {
    return html`
      <slot name="list"></slot>
    `;
  }

  static get properties() {
    return {
      selector: { type: String },

      handle: { type: String },

      // Use long press gesture to activate dragging.
      longPress: { type: Boolean },

      sorting: { type: Boolean, reflect: true },

      _sortables: { type: Array }
    };
  }

  constructor() {
    super();
    this.selector = 'div';
    this.handle = null;
    this.longPress = false;
    this.sorting = false;
    this._sortables = [];
  }

  firstUpdated() {
    this.sortable = Sortable.create(this.querySelector('[slot="list"]'), {
      animation: 150,
      onSort: e => {
        this.dispatchEvent(new CustomEvent('sorting-changed', { detail: e, bubbles: true, composed: true }));
      }
    });
  }
}

window.customElements.define('tp-sortable', TpSortable);