var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import '../../../common/filter/filter-group.js';
import { css, html, nothing } from 'lit';
import { customElement } from 'lit/decorators.js';
import { eventToVRect } from '../../../../_common/components/menu/index.js';
import { FilterIcon } from '../../../../_common/icons/index.js';
import { popCreateFilter } from '../../../common/ref/ref.js';
import { BaseTool } from './base-tool.js';
const styles = css `
  .affine-database-filter-button {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 20px;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
  }

  .affine-database-filter-button:hover {
    background-color: var(--affine-hover-color);
  }

  .affine-database-filter-button svg {
    width: 20px;
    height: 20px;
  }
`;
let DataViewHeaderToolsFilter = class DataViewHeaderToolsFilter extends BaseTool {
    get readonly() {
        return this.view.readonly;
    }
    connectedCallback() {
        super.connectedCallback();
        this.disposables.add(this.view.slots.update.on(() => {
            this.requestUpdate();
        }));
    }
    get _filter() {
        return this.view.filter;
    }
    set _filter(filter) {
        this.view.updateFilter(filter);
    }
    showToolBar(show) {
        const tools = this.closest('data-view-header-tools');
        if (tools) {
            tools.showToolBar = show;
        }
    }
    addFilter(event) {
        if (!this._filter.conditions.length && !this.view.filterVisible) {
            this.showToolBar(true);
            popCreateFilter(eventToVRect(event), {
                vars: this.view.vars,
                onSelect: filter => {
                    this._filter = {
                        ...this._filter,
                        conditions: [filter],
                    };
                    this.view.filterSetVisible(true);
                },
                onClose: () => {
                    this.showToolBar(false);
                },
            });
            return;
        }
        this.view.filterSetVisible(!this.view.filterVisible);
    }
    render() {
        if (this.readonly)
            return nothing;
        return html `<div
      @click="${this.addFilter}"
      class="affine-database-filter-button dv-icon-20"
    >
      ${FilterIcon} Filter
    </div>`;
    }
};
DataViewHeaderToolsFilter.styles = styles;
DataViewHeaderToolsFilter = __decorate([
    customElement('data-view-header-tools-filter')
], DataViewHeaderToolsFilter);
export { DataViewHeaderToolsFilter };
//# sourceMappingURL=filter.js.map