import { Controller } from '@hotwired/stimulus'
import Toastify from 'toastify-js'

export default class extends Controller {

    static values = { text: String, class: String }

    connect() {
        // Show toast from Stimulus values (existing functionality)
        if (this.hasTextValue) {
            this.showToast(this.textValue, this.classValue)
        }

        // Bind handler for proper cleanup
        this.boundHandleNotifications = this.handleNotifications.bind(this)

        // Listen for custom HTMX notification events on document.body
        // Events from HX-Trigger response headers bubble up to document.body
        document.body.addEventListener('showNotifications', this.boundHandleNotifications)
    }

    disconnect() {
        document.body.removeEventListener('showNotifications', this.boundHandleNotifications)
    }

    handleNotifications(event) {
        console.log('[VOUCHER DEBUG] showNotifications event received:', event)
        console.log('[VOUCHER DEBUG] event.detail:', event.detail)

        // HTMX wraps the trigger value in an object with 'value' and 'elt' properties
        // event.detail.value contains the actual array from the HX-Trigger header
        const notifications = event.detail?.value || event.detail || []

        console.log('[VOUCHER DEBUG] notifications array:', notifications)
        console.log('[VOUCHER DEBUG] notifications count:', Array.isArray(notifications) ? notifications.length : 'not an array')

        if (Array.isArray(notifications)) {
            notifications.forEach((notification, index) => {
                console.log(`[VOUCHER DEBUG] Processing notification ${index}:`, notification)
                const className = this.getClassForType(notification.type)
                this.showToast(notification.message, className)
            })
        } else {
            console.error('[VOUCHER DEBUG] Notifications is not an array:', notifications)
        }
    }

    showToast(text, className = '') {
        Toastify({
            duration: 5000,
            text: text,
            gravity: 'top',
            position: 'right',
            className: className,
            close: true,
        }).showToast()
    }

    getClassForType(type) {
        const typeMap = {
            'success': 'toastify--success',
            'warning': 'toastify--warning',
            'error': 'toastify--error',
            'info': 'toastify--info',
        }

        return typeMap[type] || 'toastify--info'
    }
}