import { getCLS, getFCP, getFID, getLCP, getTTFB } from 'web-vitals'

const vitalsUrl = 'https://vitals.vercel-analytics.com/v1/vitals'

function getConnectionSpeed() {
  const _navigator = navigator as Navigator & { connection?: { effectiveType: string } }

  return 'connection' in _navigator && _navigator.connection && 'effectiveType' in _navigator.connection
    ? _navigator.connection.effectiveType
    : ''
}

function sendToAnalytics(metric, options) {
  const body = {
    dsn: options.analyticsId,
    id: metric.id,
    page: window.location.pathname,
    href: window.location.href,
    event_name: metric.name,
    value: metric.value.toString(),
    speed: getConnectionSpeed(),
  }

  if (options.debug) {
    console.log('[Analytics]', metric.name, JSON.stringify(body, null, 2))
  }

  const blob = new Blob([new URLSearchParams(body).toString()], {
    // This content type is necessary for `sendBeacon`
    type: 'application/x-www-form-urlencoded',
  })
  if (navigator.sendBeacon) {
    navigator.sendBeacon(vitalsUrl, blob)
  } else
    fetch(vitalsUrl, {
      body: blob,
      method: 'POST',
      credentials: 'omit',
      keepalive: true,
    })
}

export function webVitals(options) {
  try {
    getFID((metric) => sendToAnalytics(metric, options))
    getTTFB((metric) => sendToAnalytics(metric, options))
    getLCP((metric) => sendToAnalytics(metric, options))
    getCLS((metric) => sendToAnalytics(metric, options))
    getFCP((metric) => sendToAnalytics(metric, options))
  } catch (err) {
    console.error('[Analytics]', err)
  }
}
