import { Controller } from "@hotwired/stimulus";

import Sortable from 'sortablejs'

export default class extends Controller {
    connect() {
        this.sortable = new Sortable(this.element, {
            animation: 150,
            handle: 'tr',
            onEnd: this.end.bind(this),
        });
    }

    end(event) {
        let order = [];
        this.element.querySelectorAll('tr').forEach((row, index) => {
            order.push({
                id: row.dataset.id,
                position: index + 1
            });
        });

        fetch(this.data.get('url'), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({order: order})
        }).then(Response => {
            if(Response.ok) {
                this.sortable.sort(order.map(item =>item.id))
            }
        });
    }
}