import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import TableToolbar from '../TableToolbar.vue'

describe('TableToolbar', () => {
	it('should render', () => {
		const wrapper = mount(TableToolbar, {
			props: {
				nbFiltered: 1,
				nbTotal: 2,
				showAddBtn: true,
			},
		})

		expect(wrapper.html()).toMatchSnapshot()
		expect(wrapper.find('[data-test-id="nb-rows"]').text()).toContain('1/2')
	})

	it('renders correctly when all the item are displayed', () => {
		const wrapper = mount(TableToolbar, {
			props: {
				nbFiltered: 5,
				nbTotal: 5,
			},
		})

		expect(wrapper.html()).toMatchSnapshot()
		expect(wrapper.find('[data-test-id="nb-rows"]').text()).toContain('5/5')
	})

	it('renders correctly when loading', () => {
		const wrapper = mount(TableToolbar, {
			props: {
				loading: true,
				nbFiltered: 0,
				nbTotal: 1,
			},
		})

		expect(wrapper.html()).toMatchSnapshot()
		expect(wrapper.find('.v-progress-linear').exists()).toBe(true)
	})

	it('renders correctly when the screen width <= 600px', async () => {
		// @ts-expect-error  - Property 'happyDOM' does not exist on type 'Window & typeof globalThis'.
		window.happyDOM.setInnerWidth(600)

		const wrapper = mount(TableToolbar, {
			props: {
				nbFiltered: 0,
				nbTotal: 1,
			},
		})

		await wrapper.vm.$nextTick()

		expect(wrapper.html()).toMatchSnapshot()
	})

	it('renders correctly with content slot', () => {
		const wrapper = mount(TableToolbar, {
			props: {
				nbFiltered: 0,
				nbTotal: 1,
			},
			slots: {
				searchLeft: '<p>search-left</p>',
			},
		})

		expect(wrapper.html()).toMatchSnapshot()
	})

	it('renders correctly with no items', () => {
		const wrapper = mount(TableToolbar, {
			props: {
				nbFiltered: 0,
				nbTotal: 0,
			},
		})

		expect(wrapper.html()).toMatchSnapshot()
		expect(wrapper.find('[data-test-id="nb-rows"]').exists()).toBe(false)
	})

	it('renders correctly with no nbFilters', () => {
		const wrapper = mount(TableToolbar, {
			propsData: {
				nbFiltered: undefined,
				nbTotal: 50,
			},
		})
		expect(wrapper.find('[data-test-id="nb-rows"]').text()).not.toContain('/')
		expect(wrapper.find('[data-test-id="nb-rows"]').text()).toContain('50')
	})

	it('render correctly with the button add', () => {
		const wrapper = mount(TableToolbar, {
			props: {
				nbFiltered: 0,
				nbTotal: 1,
				showAddButton: true,
			},
		})

		expect(wrapper.find('[data-test-id="add-btn"]').exists()).toBe(true)
	})

	it('emit an update:search event when the search input is updated', async () => {
		const wrapper = mount(TableToolbar, {
			props: {
				nbFiltered: 0,
				nbTotal: 1,
			},
		})

		await wrapper.find('[data-test-id="search-input"] input').setValue('search')

		expect(wrapper.emitted('update:search')).toEqual([['search']])
	})

	it('emit an add event when the add button is clicked', async () => {
		const wrapper = mount(TableToolbar, {
			props: {
				nbFiltered: 0,
				nbTotal: 1,
				showAddButton: true,
			},
		})

		await wrapper.find('[data-test-id="add-btn"]').trigger('click')

		expect(wrapper.emitted('add')).toBeTruthy()
	})

	describe('locales', () => {
		it('utilise les locales `search` / `addBtnLabel` pour les libellés', () => {
			const wrapper = mount(TableToolbar, {
				props: {
					showAddButton: true,
					locales: { search: 'RECHERCHE_PERSO', addBtnLabel: 'AJOUT_PERSO' },
				},
			})

			const html = wrapper.html()
			expect(html).toContain('RECHERCHE_PERSO')
			expect(html).toContain('AJOUT_PERSO')
		})

		it('les props `searchLabel` / `addButtonLabel` restent prioritaires sur les locales', () => {
			const wrapper = mount(TableToolbar, {
				props: {
					showAddButton: true,
					searchLabel: 'RECHERCHE_PROP',
					addButtonLabel: 'AJOUT_PROP',
					locales: { search: 'RECHERCHE_LOCALE', addBtnLabel: 'AJOUT_LOCALE' },
				},
			})

			const html = wrapper.html()
			expect(html).toContain('RECHERCHE_PROP')
			expect(html).toContain('AJOUT_PROP')
			expect(html).not.toContain('RECHERCHE_LOCALE')
			expect(html).not.toContain('AJOUT_LOCALE')
		})
	})
})