import { Controller } from '@hotwired/stimulus'

/**
 * Monitors birthday input fields (day, month, year) and dispatches a custom event
 * only when all three fields are filled with valid values.
 *
 * This prevents premature HTMX refreshes when users are still entering the date,
 * improving UX by waiting until the complete date is entered.
 */
export default class extends Controller {
    static targets = ['day', 'month', 'year']

    /**
     * Checks if all birthday fields are filled and dispatches a completion event.
     *
     * Called on input/change events from the day, month, and year fields.
     * Only dispatches the 'birthday:complete' event when all three fields
     * contain valid values that could form a complete date.
     */
    check() {
        const day = this.dayTarget.value.trim()
        const month = this.monthTarget.value.trim()
        const year = this.yearTarget.value.trim()

        if (false === this.isComplete(day, month, year)) {
            return
        }

        this.element.dispatchEvent(new CustomEvent('birthday:complete', { bubbles: true }))
    }

    /**
     * Validates that all date components are filled with plausible values.
     *
     * @param {string} day   The day value
     * @param {string} month The month value
     * @param {string} year  The year value
     *
     * @returns {boolean} True if all fields contain complete values
     */
    isComplete(day, month, year) {
        // Day: 1-2 digits
        if (0 === day.length || day.length > 2) {
            return false
        }

        // Month: 1-2 digits
        if (0 === month.length || month.length > 2) {
            return false
        }

        // Year: exactly 4 digits for a complete year
        if (4 !== year.length) {
            return false
        }

        return true
    }
}