import { beforeEach, describe, expect, it } from 'vitest'
import { elementUpdated, fixture, html } from '@open-wc/testing-helpers'
import type { UsDatepicker } from './UsDatepicker'
import type { IDatepickerBaseOptions } from './models/IDatepickerBaseOptions'
import { EnumDatepickerPresets } from './models/IDatepickerBaseOptions'
import './UsDatepicker'

function addDays(days: number) {
  const date = new Date()
  date.setDate(date.getDate() + days)
  return date
}

describe('UsDatepicker', () => {
  let datepicker: UsDatepicker
  let widgetView: IDatepickerBaseOptions['widgetView']
  let locale = 'en'
  let options: IDatepickerBaseOptions['options'] = {}
  let datepickerData: IDatepickerBaseOptions['datepickerData']
  const containerSize = { width: 400, height: 400 }

  const getElShadowRoot = (): HTMLElement => {
    return datepicker.shadowRoot?.querySelector('.datepicker') as HTMLElement
  }

  beforeEach(async () => {
    widgetView = 'vertical'
    options = {
      minDate: new Date(),
      inline: false,
    }
    datepickerData = [
      { date: new Date().toDateString(), paymentTypes: ['expense'] },
      { date: addDays(1).toDateString(), paymentTypes: ['expense'] },
      { date: addDays(3).toDateString(), paymentTypes: ['income', 'expense'] },
      { date: addDays(9).toDateString(), paymentTypes: ['income'] },
    ]

    datepicker = await fixture(
      html`
        <us-datepicker 
          .containerSize="${containerSize}"
          .widgetView="${widgetView}"
          .locale="${locale}"
          .options="${options}"
          .datepickerData="${datepickerData}"
        ></us-datepicker>
      `,
    )
  })

  it('should display default structure datepicker', () => {
    expect(datepicker).toBeDefined()
    expect(datepicker.tagName).toBe('US-DATEPICKER')
  })

  it('default has expected props and props values', () => {
    expect(datepicker.widgetView).toBeDefined()
    expect(datepicker.widgetView).toBe(widgetView)
    expect(datepicker.locale).toBeDefined()
    expect(datepicker.locale).toBe(locale)
    expect(datepicker.containerSize).toBeDefined()
    expect(datepicker.containerSize).toEqual(containerSize)
    expect(datepicker.legend).toBeUndefined()
    expect(datepicker.showLegend).toBeFalsy()
    expect(datepicker.placeholder).toBe('')
    expect(datepicker.initialPreset).toBe(EnumDatepickerPresets.CUSTOM)
    expect(datepicker.availablePresets).toEqual([])
    expect(datepicker.options).toBeDefined()
    expect(datepicker.datepickerOptions).not.toEqual(options)
    expect(datepicker.datepickerData).toBeDefined()
    expect(datepicker.datepickerData).toEqual(datepickerData)
    expect(datepicker.dataTestId).toBe('datepicker')
  })

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

    expect(classList).toContain('datepicker')
    expect(classList).toContain('vertical')
  })

  it('should have initSimpleBar / disposeSimpleBar methods', () => {
    expect(datepicker.initSimpleBar).toBeDefined()
    expect(datepicker.disposeSimpleBar).toBeDefined()
  })

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

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

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

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

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

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

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

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

  it('should change locale in datepicker and date-formatting', async () => {
    locale = 'es'
    datepicker = await fixture(
      html`
        <us-datepicker 
          .widgetView="${widgetView}"
          .locale="${locale}"
          .containerSize="${containerSize}"
        ></us-datepicker>
      `,
    )

    const dateFormatting = datepicker.datepickerOptions.dateFormat
    const daysShort = datepicker.datepickerOptions.locale?.daysShort

    expect(dateFormatting).toBe('d MMM yyyy')
    expect(daysShort).toEqual(['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'])
  })

  // it('should filter presets if availablePresets has been provided', async () => {
  //   const availablePresets = [EnumDatepickerPresets.LAST_7_DAYS, EnumDatepickerPresets.LAST_30_DAYS]

  //   datepicker = await fixture(
  //     html`
  //       <us-datepicker
  //         .availablePresets=${availablePresets}
  //       ></us-datepicker>
  //     `,
  //   )

  //   const listItems = getElShadowRoot().querySelectorAll('.datepicker__list-item')

  //   expect(datepicker.filteredPresets).length(2)
  //   expect(listItems).length(2)
  // })

  it('should toggle menu state', async () => {
    datepicker.isMenuOpen = true
    await elementUpdated(datepicker)

    datepicker.toggleMenu()

    expect(datepicker.isMenuOpen).toBeFalsy()
  })

  it('should close menu state', async () => {
    datepicker.isMenuOpen = true
    await elementUpdated(datepicker)

    datepicker.closeMenu()

    expect(datepicker.isMenuOpen).toBeFalsy()
  })

  it('should open datepicker after custom preset has been selected', async () => {
    const customPresetEl = getElShadowRoot().querySelector('.datepicker__list-item') as HTMLLIElement

    customPresetEl?.click()

    expect(datepicker.isDatepickerOpen).toBeTruthy()
    expect(datepicker.isMenuOpen).toBeFalsy()
  })
})