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

import { FilterActionType, FilterOperatorCategory } from "./types";

import { operators } from "./constant";

export class ConditionFilter {
    constructor(table, filterStateManager, pluginOptions, filterToolBarHide) {
        this.currentCategory = FilterOperatorCategory.ALL, this.categories = [], this.operators = [], 
        this.table = table, this.filterStateManager = filterStateManager, this.pluginOptions = pluginOptions, 
        this.styles = pluginOptions.styles || {}, this.categories = pluginOptions.conditionCategories, 
        this.operators = operators, this.filterToolBarHide = filterToolBarHide;
    }
    setSelectedField(fieldId) {
        this.selectedField = fieldId, this.updateOperatorOptions(), this.loadCurrentFilterState();
    }
    updateOperatorOptions() {
        if (!this.operatorSelect) return;
        let filteredOperators;
        if (this.operatorSelect.innerHTML = "", this.currentCategory === FilterOperatorCategory.ALL) {
            const uniqueOperators = new Map;
            this.operators.filter((op => this.categories.map((cat => cat.value)).includes(op.category))).forEach((op => {
                uniqueOperators.has(op.value) || uniqueOperators.set(op.value, op);
            })), filteredOperators = Array.from(uniqueOperators.values());
        } else filteredOperators = this.operators.filter((op => op.category === this.currentCategory));
        filteredOperators.forEach((op => {
            const option = document.createElement("option");
            option.value = op.value, option.textContent = op.label, this.operatorSelect.appendChild(option);
        }));
    }
    handleCategoryChange() {
        this.categorySelect && (this.currentCategory = this.categorySelect.value, this.updateOperatorOptions(), 
        this.syncUIState());
    }
    loadCurrentFilterState() {
        var _a, _b, _c, _d;
        const filter = this.filterStateManager.getFilterState(this.selectedField), syncFilterItemsState = null === (_b = null === (_a = this.pluginOptions) || void 0 === _a ? void 0 : _a.syncFilterItemsState) || void 0 === _b || _b;
        filter && "byCondition" === filter.type || !syncFilterItemsState ? (this.operatorSelect && (this.operatorSelect.value = null !== (_c = null == filter ? void 0 : filter.operator) && void 0 !== _c ? _c : operators[0].value), 
        this.valueInput && (Array.isArray(null == filter ? void 0 : filter.condition) ? (this.valueInput.value = String(filter.condition[0]), 
        this.valueInputMax && (this.valueInputMax.value = String(filter.condition[1]))) : (this.valueInput.value = String(null !== (_d = null == filter ? void 0 : filter.condition) && void 0 !== _d ? _d : ""), 
        this.valueInputMax && (this.valueInputMax.value = ""))), this.syncUIState()) : this.reset();
    }
    reset() {
        this.operatorSelect && (this.operatorSelect.selectedIndex = 0), this.valueInput && (this.valueInput.value = "", 
        this.valueInput.placeholder = "请输入筛选值"), this.valueInputMax && (this.valueInputMax.value = ""), 
        this.currentCategory = FilterOperatorCategory.ALL, this.categorySelect && (this.categorySelect.value = FilterOperatorCategory.ALL), 
        this.updateOperatorOptions(), this.syncUIState();
    }
    syncUIState() {
        if (!this.operatorSelect || !this.valueInput) return;
        const selectedOperator = this.operatorSelect.value, andLabel = this.valueInput.nextElementSibling;
        this.isRangeOperator(selectedOperator) ? (this.valueInput.placeholder = "最小值", this.valueInputMax && (this.valueInputMax.style.display = "inline-block"), 
        andLabel && (andLabel.style.display = "inline-block")) : (this.valueInput.placeholder = "请输入筛选值", 
        this.valueInputMax && (this.valueInputMax.style.display = "none"), andLabel && (andLabel.style.display = "none"));
    }
    isBooleanOperator(operator) {
        return [ "isChecked", "isUnchecked" ].includes(operator);
    }
    isRangeOperator(operator) {
        return "between" === operator || "notBetween" === operator;
    }
    applyFilter(fieldId = this.selectedField) {
        var _a, _b, _c, _d;
        if (!this.operatorSelect || !this.valueInput) return;
        const operator = null === (_a = this.operatorSelect) || void 0 === _a ? void 0 : _a.value;
        let conditionValue = null === (_b = this.valueInput) || void 0 === _b ? void 0 : _b.value;
        if (this.currentCategory === FilterOperatorCategory.NUMBER && (conditionValue = parseFloat(conditionValue), 
        isNaN(conditionValue))) return;
        if (this.isRangeOperator(operator)) {
            const minValue = conditionValue;
            let maxValue = this.valueInputMax.value.trim();
            if (this.currentCategory === FilterOperatorCategory.NUMBER) {
                const numMaxValue = parseFloat(maxValue);
                if (isNaN(numMaxValue)) return;
                maxValue = numMaxValue;
            }
            conditionValue = [ minValue, maxValue ];
        }
        if (!conditionValue && !1 !== conditionValue && 0 !== conditionValue && !this.isBooleanOperator(operator)) return void this.clearFilter(fieldId);
        const syncFilterItemsState = null === (_d = null === (_c = this.pluginOptions) || void 0 === _c ? void 0 : _c.syncFilterItemsState) || void 0 === _d || _d;
        this.filterStateManager.dispatch({
            type: FilterActionType.APPLY_FILTERS,
            payload: {
                field: fieldId,
                type: "byCondition",
                operator: operator,
                condition: conditionValue,
                enable: !0,
                shouldKeepUnrelatedState: !syncFilterItemsState
            }
        });
    }
    clearFilter(fieldId) {
        this.filterStateManager.dispatch({
            type: FilterActionType.REMOVE_FILTER,
            payload: {
                field: fieldId
            }
        }), this.hide();
    }
    render(container) {
        const filterStyles = this.styles;
        this.filterByConditionPanel = document.createElement("div"), applyStyles(this.filterByConditionPanel, filterStyles.filterPanel), 
        this.conditionContainer = document.createElement("div"), applyStyles(this.conditionContainer, this.styles.conditionContainer), 
        this.categoryLabel = createElement("label", {}, [ "筛选类型：" ]), applyStyles(this.categoryLabel, this.styles.formLabel), 
        this.categorySelect = createElement("select"), applyStyles(this.categorySelect, filterStyles.operatorSelect), 
        this.categories.forEach((category => {
            const option = document.createElement("option");
            option.value = category.value, option.textContent = category.label, this.categorySelect.appendChild(option);
        })), this.operatorLabel = createElement("label", {}, [ "筛选条件：" ]), applyStyles(this.operatorLabel, this.styles.formLabel), 
        this.operatorSelect = createElement("select"), applyStyles(this.operatorSelect, filterStyles.operatorSelect), 
        this.valueLabel = createElement("label", {}, [ "筛选值：" ]), applyStyles(this.valueLabel, this.styles.formLabel), 
        this.rangeInputContainer = createElement("div"), applyStyles(this.rangeInputContainer, this.styles.rangeInputContainer), 
        this.valueInput = createElement("input", {
            type: "text",
            placeholder: "请输入筛选值"
        }), applyStyles(this.valueInput, filterStyles.searchInput), this.andLabel = createElement("span", {}, [ "和" ]), 
        applyStyles(this.andLabel, this.styles.addLabel), this.andLabel.style.display = "none", 
        this.valueInputMax = createElement("input", {
            type: "text",
            placeholder: "最大值"
        }), applyStyles(this.valueInputMax, filterStyles.searchInput), this.valueInputMax.style.display = "none", 
        this.rangeInputContainer.appendChild(this.valueInput), this.rangeInputContainer.appendChild(this.andLabel), 
        this.rangeInputContainer.appendChild(this.valueInputMax), this.conditionContainer.appendChild(this.categoryLabel), 
        this.conditionContainer.appendChild(this.categorySelect), this.conditionContainer.appendChild(this.operatorLabel), 
        this.conditionContainer.appendChild(this.operatorSelect), this.conditionContainer.appendChild(this.valueLabel), 
        this.conditionContainer.appendChild(this.rangeInputContainer), this.filterByConditionPanel.appendChild(this.conditionContainer), 
        container.appendChild(this.filterByConditionPanel), this.hide(), this.updateOperatorOptions(), 
        this.bindEvents();
    }
    updateStyles(styles) {
        applyStyles(this.filterByConditionPanel, styles.filterPanel), applyStyles(this.conditionContainer, styles.conditionContainer), 
        applyStyles(this.categoryLabel, styles.formLabel), applyStyles(this.categorySelect, styles.operatorSelect), 
        applyStyles(this.operatorLabel, styles.formLabel), applyStyles(this.operatorSelect, styles.operatorSelect), 
        applyStyles(this.valueLabel, styles.formLabel), applyStyles(this.rangeInputContainer, styles.rangeInputContainer), 
        applyStyles(this.valueInput, styles.searchInput), applyStyles(this.andLabel, styles.addLabel), 
        applyStyles(this.valueInputMax, styles.searchInput);
    }
    bindEvents() {
        this.valueInput.addEventListener("keypress", (event => {
            "Enter" === event.key && (this.applyFilter(), this.filterToolBarHide());
        })), this.valueInputMax.addEventListener("keypress", (event => {
            "Enter" === event.key && (this.applyFilter(), this.filterToolBarHide());
        })), this.categorySelect.addEventListener("change", (() => {
            this.handleCategoryChange();
        })), this.operatorSelect.addEventListener("change", (() => {
            const selectedOperator = this.operatorSelect.value, andLabel = this.valueInput.nextElementSibling;
            this.isRangeOperator(selectedOperator) ? (this.valueInput.placeholder = "最小值", this.valueInputMax.style.display = "inline-block", 
            andLabel.style.display = "inline-block") : (this.valueInput.placeholder = "请输入筛选值", 
            this.valueInputMax.style.display = "none", andLabel.style.display = "none");
        }));
    }
    show() {
        this.filterByConditionPanel && (this.filterByConditionPanel.style.display = "block", 
        this.loadCurrentFilterState());
    }
    hide() {
        this.filterByConditionPanel && (this.filterByConditionPanel.style.display = "none");
    }
}
//# sourceMappingURL=condition-filter.js.map