import { expect } from 'vitest'
import { elementUpdated, fixture, html } from '@open-wc/testing-helpers'
import type { ICurrency } from './models/ICurrency'
import type { UsCurrenciesSwitcher } from './UsCurrenciesSwitcher'
import './UsCurrenciesSwitcher'

describe('UsCurrenciesSwitcher', () => {
  let currenciesSwitcher: UsCurrenciesSwitcher
  const activeCurrency: ICurrency = {
    total: 123,
    numCode: '978',
    charCode: 'EUR',
    name: 'Euro',
    symbol: '€',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"></svg>',
  }

  const switcherData: ICurrency[] = [
    {
      total: 123,
      numCode: '978',
      charCode: 'EUR',
      name: 'Euro',
      symbol: '€',
      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"></svg>',
    },
    {
      total: 632,
      numCode: '840',
      charCode: 'USD',
      name: 'United States dollar',
      symbol: '$',
      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"></svg>',
    },
  ]

  const isLoading = true

  beforeEach(async () => {
    currenciesSwitcher = await fixture(html`
      <us-currencies-switcher 
        ?isLoading="${isLoading}" 
        .activeCurrency="${activeCurrency}" 
        .switcherData="${switcherData}"
      ></us-currencies-switcher>
    `)
  })

  it('should be defined', () => {
    expect(currenciesSwitcher).toBeDefined()
    expect(currenciesSwitcher.tagName).toBe('US-CURRENCIES-SWITCHER')
  })

  it('should have the correct initial state', async () => {
    expect(currenciesSwitcher.activeCurrency).toEqual(activeCurrency)
    expect(currenciesSwitcher.switcherData).toEqual(switcherData)
    expect(currenciesSwitcher.isLoading).toBeTruthy()
    expect(currenciesSwitcher.isSwitcherOpen).toBeFalsy()
    expect(currenciesSwitcher.dataTestId).toBe('switcher_currencies')
  })

  it('should have a renderCurrenciesSwitcherItem method', () => {
    expect(currenciesSwitcher.renderCurrenciesSwitcherItem).toBeDefined()
  })

  it('should have a getFormatNumber method', () => {
    expect(currenciesSwitcher.getFormatNumber).toBeDefined()
  })

  it('should have a getCurrencyIcon method', () => {
    expect(currenciesSwitcher.getCurrencyIcon).toBeDefined()
  })

  it('should have a handleOpenSwitcher method', () => {
    expect(currenciesSwitcher.handleOpenSwitcher).toBeDefined()
  })

  it('should have a handleCloseSwitcher method', () => {
    expect(currenciesSwitcher.handleCloseSwitcher).toBeDefined()
  })

  it('should have a handleConfirmSwitcher method', () => {
    expect(currenciesSwitcher.handleConfirmSwitcher).toBeDefined()
  })

  it('should have selectedCurrency equals activeCurrency after open UsCurrenciesSwitcher', async () => {
    currenciesSwitcher.handleOpenSwitcher()

    await elementUpdated(currenciesSwitcher)

    expect(currenciesSwitcher.isSwitcherOpen).toBeTruthy()
    expect(currenciesSwitcher.selectedCurrency).toEqual(activeCurrency)
  })

  it('should have selectedCurrency equals {} after close UsCurrenciesSwitcher', async () => {
    currenciesSwitcher.handleCloseSwitcher()

    await elementUpdated(currenciesSwitcher)

    expect(currenciesSwitcher.isSwitcherOpen).toBeFalsy()
    expect(currenciesSwitcher.selectedCurrency).toEqual({} as ICurrency)
  })
})