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

class AttributeFilter {
    init() {
        this._attachEventHandlers();
        this._listenForURLRestore();
        this._listenForClearFilters();
    }

    _listenForURLRestore() {
        EventBus.getInstance().registerDynamicEvent({
            key: Events.FILTERS_RESTORED_FROM_URL,
            callback: (filters) => this._restoreUIFromFilters(filters)
        });
    }

    _listenForClearFilters() {
        EventBus.getInstance().registerDynamicEvent({
            key: Events.FILTERS_CLEARED,
            callback: () => this._clearAllAttributes()
        });
    }

    _clearAllAttributes() {
        jQuery('.filter-attribute').removeClass('active');
    }

    _restoreUIFromFilters(filters) {
        // Clear all active states first
        jQuery('.filter-attribute').removeClass('active');
        jQuery('.filter-attribute-checkbox').prop('checked', false);

        // Set active states from URL
        if (filters.attributes && Object.keys(filters.attributes).length > 0) {
            Object.entries(filters.attributes).forEach(([attributeKey, values]) => {
                values.forEach(value => {
                    jQuery(`.filter-attribute[data-attribute-key="${attributeKey}"][data-attribute-value="${value}"]`).addClass('active');
                    jQuery(`.filter-attribute-checkbox[data-attribute-key="${attributeKey}"][data-attribute-value="${value}"]`).prop('checked', true);
                });
            });
        }
    }

    _attachEventHandlers() {
        const $filterContainer = jQuery('.fusecommerce-filters');
        if (!$filterContainer.length) {
            return;
        }

        // Handle attribute filter clicks (buttons/checkboxes)
        $filterContainer.on('click', '.filter-attribute', function(e) {
            e.preventDefault();
            const $this = jQuery(this);
            const attributeKey = $this.data('attribute-key');
            const attributeValue = $this.data('attribute-value');
            const isActive = $this.hasClass('active');

            $this.toggleClass('active');

            const eventBus = EventBus.getInstance();
            if (isActive) {
                eventBus.triggerEvent(Events.ATTRIBUTE_DESELECTED, {
                    attributeKey,
                    attributeValue
                });
            } else {
                eventBus.triggerEvent(Events.ATTRIBUTE_SELECTED, {
                    attributeKey,
                    attributeValue
                });
            }
        });

        // Handle attribute checkboxes
        $filterContainer.on('change', '.filter-attribute-checkbox', function(e) {
            const $this = jQuery(this);
            const attributeKey = $this.data('attribute-key');
            const attributeValue = $this.data('attribute-value');
            const isChecked = $this.is(':checked');

            const eventBus = EventBus.getInstance();
            if (isChecked) {
                eventBus.triggerEvent(Events.ATTRIBUTE_SELECTED, {
                    attributeKey,
                    attributeValue
                });
            } else {
                eventBus.triggerEvent(Events.ATTRIBUTE_DESELECTED, {
                    attributeKey,
                    attributeValue
                });
            }
        });

        // Handle "clear all attributes" button if exists
        $filterContainer.on('click', '.clear-attribute-filters', function(e) {
            e.preventDefault();
            jQuery('.filter-attribute.active').removeClass('active').each(function() {
                const attributeKey = jQuery(this).data('attribute-key');
                const attributeValue = jQuery(this).data('attribute-value');
                EventBus.getInstance().triggerEvent(Events.ATTRIBUTE_DESELECTED, {
                    attributeKey,
                    attributeValue
                });
            });
            jQuery('.filter-attribute-checkbox:checked').prop('checked', false).each(function() {
                const attributeKey = jQuery(this).data('attribute-key');
                const attributeValue = jQuery(this).data('attribute-value');
                EventBus.getInstance().triggerEvent(Events.ATTRIBUTE_DESELECTED, {
                    attributeKey,
                    attributeValue
                });
            });
        });
    }
}

export default AttributeFilter;
