const createRequestOptions = (options) => {
  options = options || {}

  const apiKey = document.querySelector('html').getAttribute('data-api-key')

  if (apiKey) {
    options['headers'] = options['headers'] || {}
    options['headers']['x-api-key'] = apiKey
  }

  return options
}

const requestCallback = async (endpoint, options, callback) => {
  return fetch(endpoint, createRequestOptions(options))
    .then((response) => response.json())
    .then(callback)
}

const request = async (endpoint, options) => {
  return fetch(endpoint, createRequestOptions(options)).then((response) => response.json())
}

const requestErrorBuilder = (response) => {
  let value = response.message
  const errors = Object.values(response.errors ?? {})

  if (errors.length) {
    value += `<ul class="px-3 py-0 my-0 pt-1">${errors.map((e) => `<li class="m-0 p-0">${e}</li>`).join('')}</ul>`
  }

  return value
}

export { createRequestOptions, request, requestCallback, requestErrorBuilder }