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

export default class extends Controller {
    static values = {
        url: String,
    };

    static targets = ["item"];

    connect() {
        this.sortable = new Sortable(this.element, {
            animation: 150,
            handle: '[data-news--sortable-target="handle"]',
            onEnd: this.reorder.bind(this),
        });
    }

    reorder() {
        const order = this.itemTargets.map((el, index) => ({
            id: el.dataset.id,
            position: index + 1,
        }));

        fetch(this.urlValue, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({ order }),
        });
    }
}