import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import CookieBanner from '../CookieBanner.vue'
describe('CookieBanner', () => {
	it('renders correctly', () => {
		const wrapper = mount(CookieBanner)

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

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

		const wrapper = mount(CookieBanner, {
			global: {
				stubs: {
					Teleport: true,
				},
			},
		})
		await wrapper.vm.$nextTick()

		expect(wrapper.find('[data-test-id="customize"]').attributes('style')).toContain('100%')
	})

	it('emit a reject event with payload built from provided items', async () => {
		const wrapper = mount(CookieBanner, {
			props: {
				headingLevel: 2,
				headingLevelInformation: 2,
				items: {
					essentials: [],
					functional: [],
				},
			},
			global: {
				stubs: {
					Teleport: true,
				},
			},
		})

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

		expect(wrapper.emitted('reject')?.[0]?.[0]).toEqual({
			essentials: false,
			functional: false,
		})
	})

	it('emit an accept event with payload built from provided items', async () => {
		const wrapper = mount(CookieBanner, {
			props: {
				headingLevel: 2,
				headingLevelInformation: 2,
				items: {
					functional: [],
					analytics: [],
				},
			},
			global: {
				stubs: {
					Teleport: true,
				},
			},
		})

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

		expect(wrapper.emitted('accept')?.[0]?.[0]).toEqual({
			functional: true,
			analytics: true,
		})
	})

	it('does not close the dialog when the customize button is clicked and do not show the cookie form', async () => {
		const wrapper = mount(CookieBanner, {
			global: {
				stubs: {
					Teleport: true,
				},
			},
		})

		expect(wrapper.find('.vd-cookie-banner').exists()).toBe(true)
		await wrapper.find('[data-test-id="customize"]').trigger('click')
		await wrapper.vm.$nextTick()
		expect(wrapper.find('.vd-cookie-banner').exists()).toBe(true)
		expect(wrapper.find('.vd-cookies-card').exists()).toBe(false)
		expect(wrapper.emitted()).toHaveProperty('customize')
	})

	it('does not close the dialog when the customize button is clicked and show the cookie form', async () => {
		const wrapper = mount(CookieBanner, {
			props: {
				headingLevel: 2,
				headingLevelInformation: 2,
				items: {
					essentials: [
						{
							name: 'session',
							description: 'Sauvegarde la session pour rester connecté.',
							conservation: '20 heures',
						},
						{
							name: 'cookie_policy',
							description: 'Sauvegarde les préférences de cookies.',
							conservation: '1 an',
						},
					],
					functional: [
						{
							name: 'contrast',
							description: 'Sauvegarde la personnalisation de l’affichage.',
							conservation: '1 an',
						},
					],
					analytics: [
						{
							name: 'user_id',
							description: 'Sauvegarde l’identifiant unique de visiteur.',
							conservation: '6 mois',
						},
					],
				},
			},
			global: {
				stubs: {
					Teleport: true,
				},
			},
		})

		expect(wrapper.find('.vd-cookie-banner').exists()).toBe(true)
		await wrapper.find('[data-test-id="customize"]').trigger('click')
		await wrapper.vm.$nextTick()
		expect(wrapper.find('.vd-cookie-banner').exists()).toBe(true)
		expect(wrapper.find('.vd-cookies-card').exists()).toBe(true)
		expect(wrapper.find('.vd-cookies-card').html()).toMatchSnapshot()
		expect(wrapper.emitted()).toHaveProperty('customize')
	})

	it('emits submit payload coming from CookiesSelection without altering categories', async () => {
		const wrapper = mount(CookieBanner, {
			props: {
				headingLevel: 2,
				headingLevelInformation: 2,
				items: {
					functional: [],
					analytics: [],
				},
			},
			global: {
				stubs: {
					Teleport: true,
				},
			},
		})

		await wrapper.find('[data-test-id="customize"]').trigger('click')
		await wrapper.vm.$nextTick()

		const selection = wrapper.findComponent({ name: 'CookiesSelection' })
		selection.vm.$emit('submit', { functional: true })

		expect(wrapper.emitted('submit')?.[0]?.[0]).toEqual({
			functional: true,
		})
	})
})