import BaseComponent from "../BaseComponent";
import EventBus from "../../Events/EventBus";
import Events from "../../Events/Events";

/**
 * TagFilter Component
 * Handles tag filter interactions and state management
 */
class TagFilter {
    init() {
        this._attachEventHandlers();
        this._listenForURLRestore();
        this._listenForClearFilters();
    }

    /**
     * Listen for filter restoration from URL parameters
     */
    _listenForURLRestore() {
        EventBus.getInstance().registerDynamicEvent({
            key: Events.FILTERS_RESTORED_FROM_URL,
            callback: (filters) => this._restoreUIFromFilters(filters)
        });
    }

    /**
     * Listen for clear all filters event
     */
    _listenForClearFilters() {
        EventBus.getInstance().registerDynamicEvent({
            key: Events.FILTERS_CLEARED,
            callback: () => this._clearAllTags()
        });
    }

    /**
     * Clear all selected tags
     */
    _clearAllTags() {
        jQuery('.filter-tag').removeClass('active');
    }

    /**
     * Restore UI state from filters object
     * @param {Object} filters - The filters object containing selected tag IDs
     */
    _restoreUIFromFilters(filters) {
        // Clear all active states first
        jQuery('.filter-tag').removeClass('active');

        // Set active states from URL
        if (filters.tags && filters.tags.length > 0) {
            filters.tags.forEach(tagId => {
                jQuery(`.filter-tag[data-tag-id="${tagId}"]`).addClass('active');
            });
        }
    }

    /**
     * Attach event handlers for tag filter interactions
     */
    _attachEventHandlers() {
        const $filterContainer = jQuery('.fusecommerce-filters');
        if (!$filterContainer.length) {
            return;
        }

        // Handle tag filter clicks
        $filterContainer.on('click', '.filter-tag', (e) => {
            e.preventDefault();
            const $target = jQuery(e.currentTarget);
            const tagId = $target.data('tagId');  // jQuery converts data-tag-id to camelCase
            const tagSlug = $target.data('tagSlug');  // jQuery converts data-tag-slug to camelCase
            const isActive = $target.hasClass('active');

            // Toggle active class
            $target.toggleClass('active');

            // Trigger appropriate event
            const eventBus = EventBus.getInstance();
            if (isActive) {
                eventBus.triggerEvent(Events.TAG_DESELECTED, {
                    tagId,
                    tagSlug
                });
            } else {
                eventBus.triggerEvent(Events.TAG_SELECTED, {
                    tagId,
                    tagSlug
                });
            }
        });

        // Handle "clear all tags" button if exists
        $filterContainer.on('click', '.clear-tag-filters', (e) => {
            e.preventDefault();
            jQuery('.filter-tag.active').removeClass('active').each((i, el) => {
                const $tag = jQuery(el);
                const tagId = $tag.data('tagId');  // jQuery converts data-tag-id to camelCase
                const tagSlug = $tag.data('tagSlug');  // jQuery converts data-tag-slug to camelCase
                EventBus.getInstance().triggerEvent(Events.TAG_DESELECTED, { tagId, tagSlug });
            });
        });

        // Handle "Show All Tags" button
        $filterContainer.on('click', '.tag-show-all-btn', (e) => {
            e.preventDefault();
            jQuery('.filter-tag.tag-hidden').removeClass('hidden');
            jQuery('.tag-show-all-btn').hide();
        });
    }
}

export default TagFilter;
