import { beforeEach, describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import ListToolbar from '../../src/components/list/ListToolbar.vue'
import { resetState } from '../helpers'

const base = {
  showSearch: true,
  search: 'blue',
  searchPrompt: 'Search widgets…',
  buttons: ['delete'],
  selectedCount: 0,
  selectedLabel: 'Selected 0',
  deleteLabel: 'Delete selected',
}

beforeEach(() => {
  resetState()
})

describe('list toolbar (D-14)', () => {
  it('has a labelled search input that emits every change', async () => {
    const wrapper = mount(ListToolbar, { props: base })
    const input = wrapper.find('[data-list-search]')
    expect(input.attributes('type')).toBe('search')
    expect(input.attributes('placeholder')).toBe('Search widgets…')
    expect((input.element as HTMLInputElement).value).toBe('blue')
    expect(wrapper.find('label .sr-only').text()).toBe('Szukaj')
    await input.setValue('red')
    expect(wrapper.emitted('update:search')).toEqual([['red']])
  })

  it('hides the search when the schema turns it off', () => {
    const wrapper = mount(ListToolbar, { props: { ...base, showSearch: false } })
    expect(wrapper.find('[data-list-search]').exists()).toBe(false)
  })

  it('disables delete without a selection and shows the pill and danger button with one', async () => {
    const wrapper = mount(ListToolbar, { props: base })
    const button = () => wrapper.find('[data-action="delete"]')
    expect(button().attributes('disabled')).toBeDefined()
    expect(button().classes()).toContain('border-border-strong')
    expect(wrapper.find('[data-selected-pill]').exists()).toBe(false)

    await wrapper.setProps({ selectedCount: 2, selectedLabel: 'Selected 2' })
    expect(button().attributes('disabled')).toBeUndefined()
    expect(button().classes()).toContain('text-danger')
    expect(button().text()).toBe('Delete selected')
    expect(wrapper.find('[data-selected-pill]').text()).toBe('Selected 2')
    await button().trigger('click')
    expect(wrapper.emitted('delete')).toHaveLength(1)
  })

  it('renders only the declared toolbar buttons', () => {
    const wrapper = mount(ListToolbar, { props: { ...base, buttons: [] } })
    expect(wrapper.find('[data-action="delete"]').exists()).toBe(false)
  })
})