'use strict'

import axios from 'axios'

let token = document.querySelector('meta[name="csrf-token"]')

let config = {
    baseURL: 'http://127.0.0.1:8000/api/v1',
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-TOKEN': token.content
    }
}

const formSubmit = (elClass = 'j-submit') => {

    let route, form, formBtn, data
    let listenerSubmit = document.querySelectorAll('.' + elClass)

    // Loop into each find element
    listenerSubmit.forEach((el) => {

        // Attach listener for each element
        el.addEventListener('submit', (event) => {

            // Prevent default action
            event.preventDefault()

            // Get target form
            form = event.target

            // Get target form button(make sure that has type submit attribute)
            formBtn = form.querySelector('button[type="submit"]')

            // Get target form route stored in form attribute action
            route = form.getAttribute('action')

            // Get the formData parameters
            data = new FormData(form)

            // Make HTTP request
            axios.post(route, data, config)
                // Success
                .then( (res) => {
                    console.log(res)
                })
                // Error
                .catch((error) => {
                    let errorObject = JSON.parse(JSON.stringify(error))
                        errorObject = errorObject.response.data

                    console.log(errorObject)
                })
                // Finis
                .then(() => {
                    console.log('finished promise')
                })
        })
    })
}

export default formSubmit

window.onload = () => {
    formSubmit()
}