import { ValueFilter } from "./value-filter";

import { ConditionFilter } from "./condition-filter";

import { applyStyles, filterStyles } from "./styles";

export class FilterToolbar {
    constructor(table, filterStateManager) {
        this.valueFilter = null, this.conditionFilter = null, this.activeTab = "byValue", 
        this.isVisible = !1, this.selectedField = null, this.filterModes = [], this.table = table, 
        this.filterStateManager = filterStateManager, this.valueFilter = new ValueFilter(this.table, this.filterStateManager), 
        this.conditionFilter = new ConditionFilter(this.table, this.filterStateManager), 
        this.filterMenuWidth = 300;
    }
    onTabSwitch(tab) {
        this.activeTab = tab, "byValue" === tab ? (this.valueFilter.show(), this.conditionFilter.hide()) : (this.conditionFilter.show(), 
        this.valueFilter.hide());
        const isValueTab = "byValue" === tab;
        applyStyles(this.filterTabByValue, filterStyles.tabStyle(isValueTab)), applyStyles(this.filterTabByCondition, filterStyles.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();
    }
    render(container) {
        this.filterMenu = document.createElement("div"), applyStyles(this.filterMenu, filterStyles.filterMenu), 
        this.filterMenu.style.width = `${this.filterMenuWidth}px`;
        const filterTabsContainer = document.createElement("div");
        applyStyles(filterTabsContainer, filterStyles.tabsContainer), this.filterTabByValue = document.createElement("button"), 
        this.filterTabByValue.innerText = "按值筛选", applyStyles(this.filterTabByValue, filterStyles.tabStyle(!0)), 
        this.filterTabByCondition = document.createElement("button"), this.filterTabByCondition.innerText = "按条件筛选", 
        applyStyles(this.filterTabByCondition, filterStyles.tabStyle(!1)), filterTabsContainer.append(this.filterTabByValue, this.filterTabByCondition);
        const footerContainer = document.createElement("div");
        applyStyles(footerContainer, filterStyles.footerContainer), this.clearFilterOptionLink = document.createElement("a"), 
        this.clearFilterOptionLink.href = "#", this.clearFilterOptionLink.innerText = "清除筛选", 
        applyStyles(this.clearFilterOptionLink, filterStyles.clearLink);
        const footerButtons = document.createElement("div");
        this.cancelFilterButton = document.createElement("button"), this.cancelFilterButton.innerText = "取消", 
        applyStyles(this.cancelFilterButton, filterStyles.footerButton(!1)), this.applyFilterButton = document.createElement("button"), 
        this.applyFilterButton.innerText = "确认", applyStyles(this.applyFilterButton, filterStyles.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();
        }));
    }
    show(col, row, filterModes) {
        this.filterModes = filterModes, this.filterModes.includes("byValue") ? this.filterModes.includes("byCondition") || (this.filterTabByCondition.style.display = "none", 
        setTimeout((() => this.onTabSwitch("byValue")), 0)) : (this.filterTabByValue.style.display = "none", 
        setTimeout((() => this.onTabSwitch("byCondition")), 0));
        let left = 0, top = 0;
        const canvasBounds = this.table.canvas.getBoundingClientRect(), cell = this.table.getMergeCellRect(col, row);
        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 = "block", 
        this.filterMenu.style.left = `${left}px`, this.filterMenu.style.top = `${top}px`;
        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"), 
        setTimeout((() => {
            this.isVisible = !0;
        }), 0);
    }
    hide() {
        this.filterMenu.style.display = "none", this.isVisible = !1;
    }
}
//# sourceMappingURL=filter-toolbar.js.map