// Міксин (mixin) — об'єкт з методами, які можна додати до будь-якого класу
const EventEmitter = {
    /**
     * Підписатися на подію
     * @param {string} eventName - назва події
     * @param {function} handler - функція-обробник
     */
    on(eventName, handler) {
        // Створюємо сховище для обробників, якщо його ще немає
        if (!this._eventHandlers) {
            this._eventHandlers = {}
        }

        // Створюємо масив для цієї події, якщо його ще немає
        if (!this._eventHandlers[eventName]) {
            this._eventHandlers[eventName] = []
        }

        // Додаємо обробник до списку
        this._eventHandlers[eventName].push(handler)
    },

    /**
     * Відписатися від події
     * @param {string} eventName - назва події
     * @param {function} handler - функція-обробник для видалення
     */
    off(eventName, handler) {
        const handlers = this._eventHandlers?.[eventName]
        if (!handlers) return // Немає обробників для цієї події

        // Знаходимо та видаляємо обробник зі списку
        for (let i = 0; i < handlers.length; i++) {
            if (handlers[i] === handler) {
                handlers.splice(i, 1)
                i-- // Корекція індексу після видалення
            }
        }
    },

    /**
     * Викликати подію (emit/trigger/dispatch)
     * @param {string} eventName - назва події
     * @param {...any} args - дані для передачі обробникам
     */
    emit(eventName, ...args) {
        // Якщо немає обробників для цієї події — нічого не робимо
        if (!this._eventHandlers?.[eventName]) {
            return
        }

        // Викликаємо кожен обробник з переданими аргументами
        this._eventHandlers[eventName].forEach((handler) => {
            handler.apply(this, args)
        })
    },
}

// Клас меню
class Menu {
    constructor(items) {
        this.items = items
        this.selectedIndex = -1
    }

    select(index) {
        if (index < 0 || index >= this.items.length) {
            console.error('Невірний індекс!')
            return
        }

        this.selectedIndex = index
        const selectedItem = this.items[index]

        // Генеруємо подію "select" з даними про вибраний елемент
        this.emit('select', {
            item: selectedItem,
            index: index,
            timestamp: Date.now(),
        })
    }

    open() {
        console.log('Меню відкрито')
        // Генеруємо подію "open"
        this.emit('open')
    }

    close() {
        console.log('Меню закрито')
        // Генеруємо подію "close"
        this.emit('close')
    }
}

// Додаємо можливості роботи з подіями до класу Menu
Object.assign(Menu.prototype, EventEmitter)

// Використання
const menu = new Menu(['Головна', 'Про нас', 'Контакти', 'Налаштування'])

// Підписник 1: Аналітика
menu.on('select', (data) => {
    console.log(`📊 [Аналітика] Вибрано: "${data.item}" (індекс ${data.index})`)
    // Тут можна відправити дані на сервер
})

// Підписник 2: Оновлення UI
menu.on('select', (data) => {
    console.log(`🎨 [UI] Оновлюємо інтерфейс для пункту "${data.item}"`)
    // Тут можна змінити активний клас, показати контент тощо
})

// Підписник 3: Навігація
menu.on('select', (data) => {
    console.log(`🧭 [Навігація] Перехід до розділу "${data.item}"`)
    // Тут можна змінити URL або завантажити контент
})

// Додаємо обробник для відкриття меню
menu.on('open', () => {
    console.log('✅ Меню готове до використання')
})

// Тестуємо
menu.open()
// Виведе: Меню відкрито
//         ✅ Меню готове до використання

menu.select(1)
// Виведе: 📊 [Аналітика] Вибрано: "Про нас" (індекс 1)
//         🎨 [UI] Оновлюємо інтерфейс для пункту "Про нас"
//         🧭 [Навігація] Перехід до розділу "Про нас"

menu.select(3)
// Виведе: 📊 [Аналітика] Вибрано: "Налаштування" (індекс 3)
//         🎨 [UI] Оновлюємо інтерфейс для пункту "Налаштування"
//         🧭 [Навігація] Перехід до розділу "Налаштування"

class FileUploader {
    constructor() {
        this.files = []
    }

    upload(file) {
        // Емітуємо подію "started"
        this.emit('uploadStarted', { fileName: file.name, size: file.size })

        // Симуляція завантаження
        setTimeout(() => {
            this.files.push(file)

            // Емітуємо подію "completed"
            this.emit('uploadCompleted', {
                fileName: file.name,
                totalFiles: this.files.length,
            })
        }, 2000)
    }
}

// Додаємо можливості подій
Object.assign(FileUploader.prototype, EventEmitter)

// Використання
const uploader = new FileUploader()

uploader.on('uploadStarted', (data) => {
    console.log(`⏳ Завантаження "${data.fileName}" (${data.size} bytes)...`)
})

uploader.on('uploadCompleted', (data) => {
    console.log(`✅ Файл "${data.fileName}" завантажено! Всього: ${data.totalFiles}`)
})

uploader.upload({ name: 'photo.jpg', size: 2048576 })

<button onclick="alert('Привіт!')">Натисни мене</button>

<script>
    function handleClick() {
        console.log('Кнопку натиснуто!')
    }
</script>

<button onclick="handleClick()">Натисни мене</button>

// Браузер перетворює onclick="handleClick()" на:
button.onclick = function (event) {
    handleClick() // ваш код із атрибута
}

<button id="myButton">Натисни мене</button>

<script>
    const button = document.getElementById('myButton')

    button.onclick = function () {
        alert('Обробник через властивість!')
    }
</script>

function showMessage() {
    alert('Дякую за клік!')
}

button.onclick = showMessage // Без дужок!

button.onclick = function () {
    alert('Перший')
}
button.onclick = function () {
    alert('Другий')
} // Перезаписує перший!

// При кліку побачимо лише "Другий"

button.onclick = null

element.addEventListener(event, handler, [options])

const button = document.getElementById('myButton')

function handleClick(event) {
    console.log('Кнопку натиснуто!', event)
}

// Додаємо обробник
button.addEventListener('click', handleClick)

// Можемо додати ще один — обидва виконаються!
button.addEventListener('click', function () {
    console.log('Другий обробник!')
})

// Видалення вимагає передачі ТОЧНО тієї ж функції
button.removeEventListener('click', handleClick)

<button id="btn">Багатофункціональна кнопка</button>

<script>
    const btn = document.getElementById('btn')

    // Перший обробник — аналітика
    btn.addEventListener('click', () => {
        console.log('Відправлено подію в аналітику')
    })

    // Другий обробник — зміна UI
    btn.addEventListener('click', () => {
        btn.textContent = 'Натиснуто!'
    })

    // Третій обробник — запит на сервер
    btn.addEventListener('click', () => {
        fetch('/api/button-clicked').then((res) => res.json())
    })

    // Всі три виконаються послідовно
</script>

<button id="infoButton">Натисни мене</button>

<script>
    const button = document.getElementById('infoButton')

    button.addEventListener('click', function (event) {
        console.log('Тип події:', event.type) // "click"
        console.log('Елемент-ціль:', event.target) // <button id="infoButton">
        console.log('Елемент-обробник:', event.currentTarget) // <button id="infoButton">
        console.log('Координати кліка:', event.clientX, event.clientY)
        console.log('Натиснута Ctrl?', event.ctrlKey)
        console.log('Мітка часу:', event.timeStamp)
    })
</script>

<div id="outer" style="padding: 50px; background: lightblue;">
    Зовнішній div
    <button id="inner">Внутрішня кнопка</button>
</div>

<script>
    const outer = document.getElementById('outer')

    outer.addEventListener('click', function (event) {
        console.log('event.target:', event.target.id) // Елемент, на який клікнули
        console.log('event.currentTarget:', event.currentTarget.id) // Завжди "outer"
        console.log('this:', this.id) // Також "outer"
    })
</script>

button.onclick = function () {
    console.log(this) // <button>
    this.style.backgroundColor = 'red' // Змінюємо фон кнопки
}

<button id="menu">Відкрити меню</button>

<script>
    class Menu {
        handleEvent(event) {
            // Автоматичний роутинг подій до методів класу
            const method = 'on' + event.type[0].toUpperCase() + event.type.slice(1)
            this[method](event)
        }

        onClick(event) {
            console.log('Меню відкрито!')
            this.showMenu()
        }

        onMouseover(event) {
            event.target.style.backgroundColor = '#f0f0f0'
        }

        onMouseout(event) {
            event.target.style.backgroundColor = ''
        }

        showMenu() {
            alert('Показуємо меню...')
        }
    }

    const menu = new Menu()
    const btn = document.getElementById('menu')

    // Передаємо об'єкт замість функції
    btn.addEventListener('click', menu)
    btn.addEventListener('mouseover', menu)
    btn.addEventListener('mouseout', menu)
</script>

<!DOCTYPE html>
<html lang="uk">
    <head>
        <meta charset="UTF-8" />
        <title>Лічильник кліків</title>
        <style>
            .counter {
                font-family: Arial, sans-serif;
                max-width: 400px;
                margin: 50px auto;
                padding: 30px;
                border: 2px solid #3b82f6;
                border-radius: 10px;
                text-align: center;
            }

            .count {
                font-size: 48px;
                font-weight: bold;
                color: #3b82f6;
                margin: 20px 0;
            }

            button {
                font-size: 18px;
                padding: 10px 20px;
                margin: 5px;
                cursor: pointer;
                border: none;
                border-radius: 5px;
                background: #3b82f6;
                color: white;
                transition: background 0.3s;
            }

            button:hover {
                background: #2563eb;
            }

            button.reset {
                background: #ef4444;
            }

            button.reset:hover {
                background: #dc2626;
            }

            .info {
                margin-top: 20px;
                padding: 15px;
                background: #f1f5f9;
                border-radius: 5px;
                font-size: 14px;
                color: #475569;
            }
        </style>
    </head>
    <body>
        <div class="counter">
            <h1>Лічильник подій</h1>
            <div class="count" id="count">0</div>

            <button id="incrementBtn">➕ Збільшити</button>
            <button id="decrementBtn">➖ Зменшити</button>
            <button id="resetBtn" class="reset">🔄 Скинути</button>

            <div class="info" id="info">Натисніть кнопку для зміни лічильника</div>
        </div>

        <script>
            // Знаходимо елементи
            const countDisplay = document.getElementById('count')
            const incrementBtn = document.getElementById('incrementBtn')
            const decrementBtn = document.getElementById('decrementBtn')
            const resetBtn = document.getElementById('resetBtn')
            const info = document.getElementById('info')

            // Стан лічильника
            let count = 0

            // Функція оновлення відображення
            function updateDisplay() {
                countDisplay.textContent = count
            }

            // Функція показу інформації про подію
            function showEventInfo(event) {
                info.innerHTML = `
        <strong>Подія:</strong> ${event.type}<br>
        <strong>Елемент:</strong> ${event.target.textContent}<br>
        <strong>Час:</strong> ${new Date().toLocaleTimeString()}<br>
        <strong>Координати:</strong> (${event.clientX}, ${event.clientY})
      `
            }

            // Обробники подій
            incrementBtn.addEventListener('click', function (event) {
                count++
                updateDisplay()
                showEventInfo(event)
            })

            decrementBtn.addEventListener('click', function (event) {
                count--
                updateDisplay()
                showEventInfo(event)
            })

            // Приклад використання опції { once: true }
            resetBtn.addEventListener('click', function (event) {
                count = 0
                updateDisplay()
                showEventInfo(event)

                // Додаємо тимчасовий обробник, який спрацює один раз
                this.addEventListener(
                    'mouseover',
                    function tempHandler(e) {
                        info.innerHTML += '<br><em>Ефект скидання активний!</em>'
                    },
                    { once: true },
                )
            })

            // Додаємо ефект наведення для всіх кнопок
            const buttons = document.querySelectorAll('button')
            buttons.forEach((button) => {
                button.addEventListener('mouseenter', function () {
                    this.style.transform = 'scale(1.05)'
                })

                button.addEventListener('mouseleave', function () {
                    this.style.transform = 'scale(1)'
                })
            })
        </script>
    </body>
</html>