import { beforeEach, describe, expect, it, vi } from 'vitest'
import { fixture, fixtureCleanup, html } from '@open-wc/testing-helpers'
import './UsTabs'
import type { LitElement } from 'lit'
import type { ITabsProps } from './model/ITabsProps'
import type { ITabProps } from './model/ITabProps'

type ITestUsTabs = LitElement & ITabsProps

interface ITabsSettings extends ITabsProps {
  tabs: ITabProps[]
  tabchange: Function
}

describe('UsTab', () => {
  let tabs: ITestUsTabs
  let mockHandleTabChange: Function

  const getNavElShadowRoot = (): HTMLElement => {
    return tabs.shadowRoot?.querySelector('.us-tabs') as HTMLElement
  }

  const getContainerElShadowRoot = (): HTMLElement => {
    return getNavElShadowRoot().querySelector('.us-tabs__container') as HTMLElement
  }

  const getTabElShadowRoot = (): any => {
    return getNavElShadowRoot().querySelectorAll('.us-tab') as any
  }

  beforeEach(async () => {
    mockHandleTabChange = vi.fn(e => e)

    const settings: ITabsSettings = {
      variant: 'line',
      size: 'lg',
      titleSidesPadding: '',
      titleBottomMargin: '20px',
      fullTabWidth: true,
      tabs: [
        {
          disabled: false,
          selected: true,
          name: 'tab 1',
          value: '1',
        },
        {
          disabled: false,
          selected: false,
          name: 'tab 2',
          value: '2',
        },
      ],
      scrollBar: false,
      ariaLabel: 'tabs-test',
      tabchange: mockHandleTabChange,
    }

    tabs = await fixture(html`<us-tabs
      variant=${settings.variant}
      size=${settings.size}
      titleSidesPadding=${settings.titleSidesPadding}
      titleBottomMargin=${settings.titleBottomMargin}
      ariaLabel=${settings.ariaLabel}
      ?scrollBar=${settings.scrollBar}
      ?fullTabWidth=${settings.fullTabWidth}
      @tabchange=${settings.tabchange}
    >
      ${settings.tabs.map((tab: ITabProps) => html`
        <us-tab
          name=${tab.name}
          ?selected=${tab.selected}
          ?disabled=${tab.disabled}
          value=${tab.value}
        >
          ${tab.name} test content
        </us-tab>
      `)}
    </us-tabs>`)
  })

  afterEach(() => {
    fixtureCleanup()
  })

  it('should be defined and with correct tag name', () => {
    expect(tabs).toBeDefined()
    expect(tabs.tagName).toBe('US-TABS')
  })

  it('default has expected props and props values', () => {
    expect(tabs.hasAttribute('size')).toBeTruthy()
    expect(tabs.hasAttribute('variant')).toBeTruthy()
    expect(tabs.hasAttribute('titlebottommargin')).toBeTruthy()
    expect(tabs.hasAttribute('titlesidespadding')).toBeTruthy()
    expect(tabs.hasAttribute('arialabel')).toBeTruthy()
    expect(tabs.hasAttribute('fulltabwidth')).toBeTruthy()
    expect(tabs.getAttribute('size')).toBe('lg')
    expect(tabs.getAttribute('variant')).toBe('line')
    expect(tabs.getAttribute('titlebottommargin')).toBe('20px')
    expect(tabs.getAttribute('titlesidespadding')).toBe('')
    expect(tabs.getAttribute('arialabel')).toBe('tabs-test')
    expect(tabs.getAttribute('data-testid')).toBe('tabs')
  })

  it('should has 2 tabs children', () => {
    const container = getContainerElShadowRoot()

    expect(container.children.length).toBe(2)
  })

  it('default has expected classes for tabs container', () => {
    const container = getContainerElShadowRoot()
    const classList = container.className.trim()

    expect(classList).toContain('us-tabs__container')
  })

  it('default has expected classes for tab wrapper (select tab)', () => {
    const containers = getTabElShadowRoot()
    const classList = containers[0].className.trim()

    expect(classList).toContain('us-tab')
    expect(classList).toContain('us-tab_line')
    expect(classList).toContain('us-tab_lg')
    expect(classList).toContain('us-tab_selected')
    expect(classList).not.toContain('us-tab_disabled')
  })

  it('should dispatch event on clicks', async () => {
    const tab = getTabElShadowRoot()[1]

    tab.addEventListener('click', () => mockHandleTabChange())
    tab.click()

    expect(mockHandleTabChange).toHaveBeenCalled()
  })
})