// Copy paste from https://gist.github.com/nuxodin/9250e56a3ce6c0446efa
export default function ffPolyfill(): void {
  const w = window
  const d = w.document

  if (w.onfocus === undefined) {
    d.addEventListener('focus', addPolyfill as EventListener, true)
    d.addEventListener('blur', addPolyfill as EventListener, true)
    d.addEventListener('focusin', removePolyfill as EventListener, true)
    d.addEventListener('focusout', removePolyfill as EventListener, true)
  }

  function addPolyfill(e: FocusEvent) {
    const type = e.type === 'focus' ? 'focusin' : 'focusout'
    const event = new CustomEvent(type, {
      bubbles: true,
      cancelable: false,
    })
    // @ts-expect-error <comment on type error>
    event.c1Generated = true
    ;(e.target as HTMLElement).dispatchEvent(event)
  }

  function removePolyfill(e: FocusEvent) {
    // @ts-expect-error <comment on type error>
    if (!e.c1Generated) {
      // focus after focusin, so chrome will the first time trigger tow times focusin
      d.removeEventListener('focus', addPolyfill as EventListener, true)
      d.removeEventListener('blur', addPolyfill as EventListener, true)
      d.removeEventListener('focusin', removePolyfill as EventListener, true)
      d.removeEventListener('focusout', removePolyfill as EventListener, true)
    }
    setTimeout(() => {
      d.removeEventListener('focusin', removePolyfill as EventListener, true)
      d.removeEventListener('focusout', removePolyfill as EventListener, true)
    })
  }
}