"use strict";

Object.defineProperty(exports, "__esModule", {
    value: !0
}), exports.FilterToolbar = void 0;

const value_filter_1 = require("./value-filter"), condition_filter_1 = require("./condition-filter"), styles_1 = require("./styles");

class FilterToolbar {
    constructor(table, filterStateManager, styles) {
        this.valueFilter = null, this.conditionFilter = null, this.activeTab = "byValue", 
        this.isVisible = !1, this.selectedField = null, this.filterModes = [], this.table = table, 
        this.filterStateManager = filterStateManager, this.styles = styles, this.valueFilter = new value_filter_1.ValueFilter(this.table, this.filterStateManager, this.styles), 
        this.conditionFilter = new condition_filter_1.ConditionFilter(this.table, this.filterStateManager, this.styles), 
        this.filterMenuWidth = 300, this.filterStateManager.subscribe((state => {
            this.isVisible && null !== this.selectedField && this.updateClearFilterButtonState(this.selectedField);
        }));
    }
    onTabSwitch(tab) {
        this.activeTab = tab, "byValue" === tab ? (this.valueFilter.show(), this.conditionFilter.hide()) : (this.conditionFilter.show(), 
        this.valueFilter.hide());
        const isValueTab = "byValue" === tab;
        (0, styles_1.applyStyles)(this.filterTabByValue, this.styles.tabStyle(isValueTab)), 
        (0, styles_1.applyStyles)(this.filterTabByCondition, this.styles.tabStyle(!isValueTab));
    }
    updateSelectedField(field) {
        this.selectedField = field, this.valueFilter && this.valueFilter.setSelectedField(field), 
        this.conditionFilter && this.conditionFilter.setSelectedField(field);
    }
    applyFilter(field) {
        "byValue" === this.activeTab ? this.valueFilter.applyFilter(field) : "byCondition" === this.activeTab && this.conditionFilter.applyFilter(field), 
        this.hide();
    }
    clearFilter(field) {
        this.valueFilter && this.valueFilter.clearFilter(field), this.conditionFilter && this.conditionFilter.clearFilter(field), 
        this.hide();
    }
    updateClearFilterButtonState(field) {
        const currentFilter = this.filterStateManager.getFilterState(field), hasActiveFilter = currentFilter && currentFilter.enable;
        this.clearFilterOptionLink.style.display = "inline", this.clearFilterOptionLink.style.opacity = hasActiveFilter ? "1" : "0.5", 
        this.clearFilterOptionLink.style.pointerEvents = hasActiveFilter ? "auto" : "none", 
        this.clearFilterOptionLink.style.cursor = hasActiveFilter ? "pointer" : "not-allowed";
    }
    render(container) {
        this.filterMenu = document.createElement("div"), this.filterMenu.classList.add("vtable-filter-menu"), 
        (0, styles_1.applyStyles)(this.filterMenu, this.styles.filterMenu), this.filterMenu.style.width = `${this.filterMenuWidth}px`;
        const filterTabsContainer = document.createElement("div");
        (0, styles_1.applyStyles)(filterTabsContainer, this.styles.tabsContainer), this.filterTabByValue = document.createElement("button"), 
        this.filterTabByValue.innerText = "按值筛选", (0, styles_1.applyStyles)(this.filterTabByValue, this.styles.tabStyle(!0)), 
        this.filterTabByCondition = document.createElement("button"), this.filterTabByCondition.innerText = "按条件筛选", 
        (0, styles_1.applyStyles)(this.filterTabByCondition, this.styles.tabStyle(!1)), 
        filterTabsContainer.append(this.filterTabByValue, this.filterTabByCondition);
        const footerContainer = document.createElement("div");
        (0, styles_1.applyStyles)(footerContainer, this.styles.footerContainer), this.clearFilterOptionLink = document.createElement("a"), 
        this.clearFilterOptionLink.href = "#", this.clearFilterOptionLink.innerText = "清除筛选", 
        (0, styles_1.applyStyles)(this.clearFilterOptionLink, this.styles.clearLink);
        const footerButtons = document.createElement("div");
        this.cancelFilterButton = document.createElement("button"), this.cancelFilterButton.innerText = "取消", 
        (0, styles_1.applyStyles)(this.cancelFilterButton, this.styles.footerButton(!1)), 
        this.applyFilterButton = document.createElement("button"), this.applyFilterButton.innerText = "确认", 
        (0, styles_1.applyStyles)(this.applyFilterButton, this.styles.footerButton(!0)), 
        footerButtons.append(this.cancelFilterButton, this.applyFilterButton), footerContainer.append(this.clearFilterOptionLink, footerButtons), 
        this.filterMenu.append(filterTabsContainer), this.valueFilter.render(this.filterMenu), 
        this.conditionFilter.render(this.filterMenu), this.filterMenu.append(footerContainer), 
        container.appendChild(this.filterMenu), this.attachEventListeners();
    }
    attachEventListeners() {
        this.filterTabByValue.addEventListener("click", (() => {
            this.onTabSwitch("byValue");
        })), this.filterTabByCondition.addEventListener("click", (() => {
            this.onTabSwitch("byCondition");
        })), this.cancelFilterButton.addEventListener("click", (() => this.hide())), this.clearFilterOptionLink.addEventListener("click", (e => {
            e.preventDefault(), this.clearFilter(this.selectedField);
        })), this.applyFilterButton.addEventListener("click", (() => {
            this.applyFilter(this.selectedField);
        })), document.addEventListener("click", (() => {
            this.isVisible && this.hide();
        })), this.filterMenu.addEventListener("click", (e => {
            e.stopPropagation();
        }));
    }
    adjustMenuPosition(col, row, providedLeft, providedTop) {
        if ("number" == typeof providedLeft && "number" == typeof providedTop) return this.filterMenu.style.display = this.isVisible ? "block" : "none", 
        this.filterMenu.style.left = `${providedLeft}px`, void (this.filterMenu.style.top = `${providedTop}px`);
        const effectiveCol = "number" == typeof col ? col : this.currentCol, effectiveRow = "number" == typeof row ? row : this.currentRow;
        if ("number" != typeof effectiveCol || "number" != typeof effectiveRow) return;
        this.currentCol = effectiveCol, this.currentRow = effectiveRow;
        let left = 0, top = 0;
        const canvasBounds = this.table.canvas.getBoundingClientRect(), cell = this.table.getCellRelativeRect(effectiveCol, effectiveRow);
        cell.right < this.filterMenuWidth ? (left = cell.left + canvasBounds.left, top = cell.bottom + canvasBounds.top) : (left = cell.right + canvasBounds.left - this.filterMenuWidth, 
        top = cell.bottom + canvasBounds.top), this.filterMenu.style.display = this.isVisible ? "block" : "none", 
        this.filterMenu.style.left = `${left}px`, this.filterMenu.style.top = `${top}px`;
    }
    show(col, row, filterModes) {
        this.filterModes = filterModes, this.filterModes.includes("byValue") ? this.filterModes.includes("byCondition") || (this.filterTabByCondition.style.display = "none", 
        this.onTabSwitch("byValue")) : (this.filterTabByValue.style.display = "none", this.onTabSwitch("byCondition")), 
        this.adjustMenuPosition(col, row), this.filterMenu.style.display = "block";
        const field = this.table.internalProps.layoutMap.getHeaderField(col, row);
        this.updateSelectedField(field);
        const currentFilter = this.filterStateManager.getFilterState(field);
        currentFilter && "byCondition" === currentFilter.type ? this.onTabSwitch("byCondition") : this.onTabSwitch("byValue"), 
        this.updateClearFilterButtonState(field), setTimeout((() => {
            this.isVisible = !0;
        }), 0);
    }
    hide() {
        this.filterMenu.style.display = "none", this.isVisible = !1;
    }
}

exports.FilterToolbar = FilterToolbar;
//# sourceMappingURL=filter-toolbar.js.map