import { TABLE_EVENT_TYPE } from "@visactor/vtable";

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

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

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

export class FilterToolbar {
    constructor(table, filterStateManager, pluginOptions) {
        this.valueFilter = null, this.conditionFilter = null, this.activeTab = "byValue", 
        this.isVisible = !1, this.selectedField = null, this.filterModes = [], this.hide = (currentCol, currentRow) => {
            this.filterMenu.style.display = "none", this.isVisible = !1, this.table.fireListeners(TABLE_EVENT_TYPE.FILTER_MENU_HIDE, {
                col: null != currentCol ? currentCol : this.currentCol,
                row: null != currentRow ? currentRow : this.currentRow
            });
        }, this.table = table, this.filterStateManager = filterStateManager, this.valueFilter = new ValueFilter(this.table, this.filterStateManager, pluginOptions), 
        this.conditionFilter = new ConditionFilter(this.table, this.filterStateManager, pluginOptions, this.hide), 
        this.pluginOptions = pluginOptions, 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;
        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();
    }
    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) {
        const filterStyles = this.pluginOptions.styles || {};
        this.filterMenu = document.createElement("div"), this.filterMenu.classList.add("vtable-filter-menu"), 
        applyStyles(this.filterMenu, filterStyles.filterMenu), this.filterMenu.style.width = `${this.filterMenuWidth}px`, 
        this.filterTabsContainer = document.createElement("div"), applyStyles(this.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)), 
        this.filterTabsContainer.append(this.filterTabByValue, this.filterTabByCondition), 
        this.footerContainer = document.createElement("div"), applyStyles(this.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), this.footerContainer.append(this.clearFilterOptionLink, footerButtons), 
        this.filterMenu.append(this.filterTabsContainer), this.valueFilter.render(this.filterMenu), 
        this.conditionFilter.render(this.filterMenu), this.filterMenu.append(this.footerContainer), 
        container.appendChild(this.filterMenu), this.attachEventListeners();
    }
    updateStyles(styles) {
        var _a;
        const realDisplay = (null !== (_a = this.filterMenu.style.display) && void 0 !== _a ? _a : styles.filterMenu.display) || "none";
        applyStyles(this.filterMenu, Object.assign(Object.assign({}, styles.filterMenu), {
            display: realDisplay
        })), applyStyles(this.filterTabsContainer, styles.tabsContainer), applyStyles(this.filterTabByValue, styles.tabStyle(!0)), 
        applyStyles(this.footerContainer, styles.footerContainer), applyStyles(this.clearFilterOptionLink, styles.clearLink), 
        applyStyles(this.cancelFilterButton, styles.footerButton(!1)), applyStyles(this.applyFilterButton, styles.footerButton(!0)), 
        this.valueFilter.updateStyles(styles), this.conditionFilter.updateStyles(styles);
        const currentFilter = this.filterStateManager.getFilterState(this.selectedField);
        currentFilter && "byCondition" === currentFilter.type ? this.onTabSwitch("byCondition") : this.onTabSwitch("byValue");
    }
    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), filterMenuWidth = this.filterMenuWidth;
        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), left = Math.max(0, Math.min(window.innerWidth - filterMenuWidth, left)), 
        top = Math.max(0, Math.min(window.innerHeight - 380, 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.valueFilter.clearSearchInputValue(), 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, this.table.fireListeners(TABLE_EVENT_TYPE.FILTER_MENU_SHOW, {
                col: col,
                row: row
            });
        }), 0);
    }
    destroy() {
        this.valueFilter.destroy(), this.filterMenu.remove();
    }
}
//# sourceMappingURL=filter-toolbar.js.map