// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import React from 'react'

import Expander, { ExpanderProps } from '../../index'
import { ExpanderClient } from '../../client'
import { render, screen } from '@testing-library/react'

//mock IntersectionObserver
class IntersectionObserver {
  //mock constructor
  constructor(callback) {
    this.callback = callback
  }
  observe() {
    this.active = true
  }
  disconnect() {
    this.active = false
  }

  intersects() {
    if (this.active) {
      this.callback([{ isIntersecting: true }])
    }
  }
}

//mock scrollIntoView
window.HTMLElement.prototype.scrollIntoView = jest.fn()

describe('Expander client test', () => {
  beforeEach(() => {
    window.IntersectionObserver = IntersectionObserver
  })

  it('find expanders markup and initialises it', () => {
    const props: ExpanderProps = {
      id: 'test-id',
    }
    render(
      <Expander {...props}>
        <div>Children 1</div>
      </Expander>
    )

    const expanders = ExpanderClient.init()
    expect(expanders.length).toBe(1)
    expect(
      document.querySelectorAll("[data-component='expander']").length
    ).toBe(1)
    expect(expanders[0].container.id).toBe('test-id__container')
    expect(
      expanders[0].container.classList.contains('cp-expander--initialised')
    ).toBe(true)
  })

  it('does not initialise expanders twice', () => {
    const props: ExpanderProps = {
      id: 'test-id',
    }
    render(
      <Expander {...props}>
        <div>Children 1</div>
      </Expander>
    )
    ExpanderClient.init()
    const expanders = ExpanderClient.init()

    expect(expanders.length).toBe(0)
    expect(
      document.querySelectorAll("[data-component='expander']").length
    ).toBe(1)
  })

  it('expands and collapse', async () => {
    const props: ExpanderProps = {
      id: 'test-id',
    }
    render(
      <Expander {...props}>
        <div>Children 1</div>
      </Expander>
    )
    const expanders = ExpanderClient.init()
    const expanderButton = screen.getByText('Expand')
    const collapserButton = screen.getByText('Collapse')
    expect(expanderButton.getAttribute('aria-expanded')).toBe('false')
    expect(expanderButton.getAttribute('aria-hidden')).toBe('false')
    expect(collapserButton.getAttribute('aria-expanded')).toBe('false')
    expect(collapserButton.getAttribute('aria-hidden')).toBe('true')

    await expanderButton.click()
    expect(expanderButton.getAttribute('aria-expanded')).toBe('true')
    expect(expanders[0].container?.getAttribute('data-state')).toBe('expanded')
    expect(expanderButton.getAttribute('aria-expanded')).toBe('true')
    expect(expanderButton.getAttribute('aria-hidden')).toBe('true')
    expect(collapserButton.getAttribute('aria-expanded')).toBe('true')
    expect(collapserButton.getAttribute('aria-hidden')).toBe('false')

    await collapserButton.click()
    expect(expanders[0].container?.getAttribute('data-state')).toBe('collapsed')
    expect(expanderButton.getAttribute('aria-expanded')).toBe('false')
    expect(expanderButton.getAttribute('aria-hidden')).toBe('false')
    expect(collapserButton.getAttribute('aria-expanded')).toBe('false')
    expect(collapserButton.getAttribute('aria-hidden')).toBe('true')
  })

  it('track entire read only once', () => {
    const props: ExpanderProps = {
      id: 'test-id',
    }
    render(
      <Expander {...props}>
        <div>Children 1</div>
      </Expander>
    )

    const expanders = ExpanderClient.init()
    const spy = jest.spyOn(document.body, 'dispatchEvent')
    spy.mockImplementation((event) => {
      expect(event.detail.action).toBe('entire_read')
    })
    expanders[0].trackingEntireRead.observer.intersects()
    expect(spy).toHaveBeenCalledTimes(1)
    expanders[0].trackingEntireRead.observer.intersects()
    expect(spy).toHaveBeenCalledTimes(1)
  })
})