import { describe, it, expect, beforeEach } from 'vitest'
import { initBilletDesigner } from '../../assets/modules/billet-designer.js'

describe('initBilletDesigner', () => {
    beforeEach(() => {
        document.body.innerHTML = ''
    })

    it('does nothing without designer element', () => {
        expect(() => initBilletDesigner()).not.toThrow()
    })

    it('does nothing without preview url', () => {
        document.body.innerHTML = '<div id="billet-designer"></div>'
        expect(() => initBilletDesigner()).not.toThrow()
    })

    it('does nothing without iframe', () => {
        document.body.innerHTML = '<div id="billet-designer" data-preview-url="/preview"></div>'
        expect(() => initBilletDesigner()).not.toThrow()
    })

    it('reloads iframe on color input change', () => {
        document.body.innerHTML = `
            <div id="billet-designer" data-preview-url="/preview">
                <input type="color" name="bg_color" value="#ffffff">
                <iframe id="billet-preview-frame" src="/preview"></iframe>
            </div>
        `

        initBilletDesigner()

        const input = document.querySelector('input[name="bg_color"]')
        input.value = '#ff0000'
        input.dispatchEvent(new Event('input', { bubbles: true }))

        const iframe = document.getElementById('billet-preview-frame')
        expect(iframe.src).toContain('bg_color=%23ff0000')
    })

    it('reloads iframe on checkbox change', () => {
        document.body.innerHTML = `
            <div id="billet-designer" data-preview-url="/preview">
                <input type="checkbox" name="show_logo" checked>
                <iframe id="billet-preview-frame" src="/preview"></iframe>
            </div>
        `

        initBilletDesigner()

        const checkbox = document.querySelector('input[name="show_logo"]')
        checkbox.checked = false
        checkbox.dispatchEvent(new Event('change', { bubbles: true }))

        const iframe = document.getElementById('billet-preview-frame')
        expect(iframe.src).toContain('show_logo=0')
    })

    it('includes all inputs in preview url', () => {
        document.body.innerHTML = `
            <div id="billet-designer" data-preview-url="/preview">
                <input type="color" name="bg_color" value="#ffffff">
                <input type="color" name="text_color" value="#111111">
                <input type="checkbox" name="show_logo" checked>
                <iframe id="billet-preview-frame" src="/preview"></iframe>
            </div>
        `

        initBilletDesigner()

        const input = document.querySelector('input[name="bg_color"]')
        input.dispatchEvent(new Event('input', { bubbles: true }))

        const iframe = document.getElementById('billet-preview-frame')
        expect(iframe.src).toContain('bg_color=%23ffffff')
        expect(iframe.src).toContain('text_color=%23111111')
        expect(iframe.src).toContain('show_logo=1')
    })

    it('reloads on reload button click', () => {
        document.body.innerHTML = `
            <div id="billet-designer" data-preview-url="/preview">
                <input type="color" name="bg_color" value="#aabbcc">
                <iframe id="billet-preview-frame" src="/preview"></iframe>
                <button id="billet-reload-preview"></button>
            </div>
        `

        initBilletDesigner()

        document.getElementById('billet-reload-preview').click()

        const iframe = document.getElementById('billet-preview-frame')
        expect(iframe.src).toContain('bg_color=%23aabbcc')
    })
})