export type ConfigureFn = (request: XMLHttpRequest) => any
export interface AjaxResponse {
  data: any
  status: number
  statusText: string
  headers: string
  request: XMLHttpRequest
}
export type AjaxRequestData = FormData | any
export interface AjaxError extends Error {
  error: true
  code: string
  request: XMLHttpRequest
  response?: AjaxResponse
}

/* inspired by axios */
class AjaxRequest {
  public createError(
    message: string,
    code: string | null,
    request: XMLHttpRequest,
    response?: AjaxResponse
  ): AjaxError {
    const error: AjaxError = new Error(message) as AjaxError
    error.error = true
    if (code) {
      error.code = code
    }
    error.request = request
    error.response = response
    return error
  }

  public settle(resolve: any, reject: any, response: AjaxResponse) {
    const validateStatus = (status: number) => {
      return status >= 200 && status < 300
    }
    // Note: status is not exposed by XDomainRequest
    if (!response.status || !validateStatus || validateStatus(response.status)) {
      resolve(response)
    } else {
      reject(
        this.createError(
          'Request failed with status code ' + response.status,
          null,
          response.request,
          response
        )
      )
    }
  }

  public request(
    method: string,
    url: string,
    formData: AjaxRequestData | null = null,
    configureFn?: ConfigureFn
  ): Promise<AjaxResponse> {
    return new Promise((resolve, reject) => {
      // tslint:disable-next-line
      let request = new XMLHttpRequest()
      const loadEvent = 'onreadystatechange'

      request.open(method, url, true)

      // Listen for ready state
      request[loadEvent] = () => {
        if (!request || request.readyState !== 4) {
          return
        }

        // The request errored out and we didn't get a response, this will be
        // handled by onerror instead
        // With one exception: request that using file: protocol, most browsers
        // will return status as 0 even though it's a successful request
        if (
          request.status === 0 &&
          !(request.responseURL && request.responseURL.indexOf('file:') === 0)
        ) {
          return
        }

        // Prepare the response
        const responseHeaders = request.getAllResponseHeaders()
        let responseData: any = request.responseText
        const contentType = request.getResponseHeader('Content-Type')
        if (contentType && contentType.indexOf('application/json') !== -1) {
          responseData = JSON.parse(responseData)
        } else {
          try {
            responseData = JSON.parse(responseData)
          } catch (e) {
            /* ignore, possibly non json response */
          }
        }
        const response: AjaxResponse = {
          data: responseData,
          // IE sends 1223 instead of 204 (https://github.com/axios/axios/issues/201)
          status: request.status === 1223 ? 204 : request.status,
          statusText: request.status === 1223 ? 'No Content' : request.statusText,
          headers: responseHeaders,
          request,
        }

        this.settle(resolve, reject, response)

        // Clean up request
        ;(request as any) = null
      }

      // Handle browser request cancellation (as opposed to a manual cancellation)
      request.onabort = () => {
        if (!request) {
          return
        }

        reject(this.createError('Request aborted', 'ECONNABORTED', request))

        // Clean up request
        ;(request as any) = null
      }

      // Handle low level network errors
      request.onerror = () => {
        // Real errors are hidden from us by the browser
        // onerror should only fire if it's a network error
        reject(this.createError('Network Error', null, request))

        // Clean up request
        ;(request as any) = null
      }

      // Handle timeout
      request.ontimeout = () => {
        reject(this.createError('timeout exceeded', 'ECONNABORTED', request))

        // Clean up request
        ;(request as any) = null
      }

      // // Handle progress if needed
      // if (typeof config.onDownloadProgress === 'function') {
      //   request.addEventListener('progress', config.onDownloadProgress);
      // }

      // Not all browsers support upload events
      // if (typeof progressCallback === 'function' && request.upload) {
      //   request.upload.addEventListener('progress', progressCallback);
      // }

      if (typeof configureFn === 'function') {
        configureFn(request)
      }

      request.send(formData)
    })
  }

  public post(url: string, formData: AjaxRequestData, configureFn?: ConfigureFn) {
    return this.request('POST', url, formData, configureFn)
  }

  public delete(url: string, formData: AjaxRequestData, configureFn?: ConfigureFn) {
    return this.request('DELETE', url, formData, configureFn)
  }

  public put(url: string, formData: AjaxRequestData, configureFn?: ConfigureFn) {
    return this.request('PUT', url, formData, configureFn)
  }
}

export default new AjaxRequest()