import { Controller } from '@hotwired/stimulus'
import { csrfToken } from './csrf'

// Sits on an <x-checkout::add-to-cart> <form>. Submits the line to the cart
// via fetch and hands the server-rendered cart body to the drawer through the
// `bbk-cart:changed` window event. No DOM building here — the drawer
// (bbk-cart-controller) owns rendering.
export default class extends Controller {
    async add(event) {
        event.preventDefault()

        const form = this.element
        const submit = form.querySelector('[type="submit"]')

        form.setAttribute('data-bbk-add-to-cart-state', 'loading')
        if (submit) submit.disabled = true

        try {
            const response = await fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken(),
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: new FormData(form),
            })

            if (!response.ok) return

            window.dispatchEvent(new CustomEvent('bbk-cart:changed', {
                detail: { html: await response.text() },
            }))
        } finally {
            form.removeAttribute('data-bbk-add-to-cart-state')
            if (submit) submit.disabled = false
        }
    }
}