import { Controller } from '@hotwired/stimulus'
import Sortable from 'sortablejs'

export default class extends Controller {

    static values = { endpoint: String }
    static targets = ['item', 'handle']

    connect() {
        new Sortable(this.element, {
            item: '[data-sortable-target="item"]',
            handle: '[data-sortable-target="handle"]',
            onEnd: e => {
                this.updateOrdering()
            }
        })
    }

    updateOrdering() {
        let ordering = {}
        this.itemTargets.forEach((item, index) => {
            let projectId = parseInt(item.dataset.itemId)
            ordering[projectId] = index + 1
        })
        fetch(this.endpointValue, {
            method: 'POST',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ ordering: ordering })
        })
    }
}