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 { ShadowlessElement, WithDisposable } from '@blockeditor/lit';
import { css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { eventToVRect, popFilterableSimpleMenu, } from '../../../_common/components/menu/menu.js';
import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js';
import { AddCursorIcon } from '../../../_common/icons/index.js';
import { firstFilterByRef, firstFilterInGroup } from '../ast.js';
let VariableRefView = class VariableRefView extends WithDisposable(ShadowlessElement) {
    connectedCallback() {
        super.connectedCallback();
        this.disposables.addFromEvent(this, 'click', e => {
            popFilterableSimpleMenu(eventToVRect(e), this.vars.map(v => ({
                type: 'action',
                name: v.name,
                icon: renderUniLit(v.icon, {}),
                select: () => {
                    this.setData({
                        type: 'ref',
                        name: v.id,
                    });
                },
            })));
        });
    }
    get field() {
        if (!this.data) {
            return;
        }
        if (this.data.type === 'ref') {
            return this.data.name;
        }
        return this.data.ref.name;
    }
    get fieldData() {
        const id = this.field;
        if (!id) {
            return;
        }
        return this.vars.find(v => v.id === id);
    }
    get property() {
        if (!this.data) {
            return;
        }
        if (this.data.type === 'ref') {
            return;
        }
        return this.data.propertyFuncName;
    }
    render() {
        const data = this.fieldData;
        return html ` ${renderUniLit(data?.icon, {})} ${data?.name} `;
    }
};
VariableRefView.styles = css `
    variable-ref-view {
      font-size: 12px;
      line-height: 20px;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 4px;
      border-radius: 4px;
      cursor: pointer;
    }

    variable-ref-view:hover {
      background-color: var(--affine-hover-color);
    }

    variable-ref-view svg {
      width: 16px;
      height: 16px;
      fill: var(--affine-icon-color);
      color: var(--affine-icon-color);
    }
  `;
__decorate([
    property({ attribute: false })
], VariableRefView.prototype, "data", void 0);
__decorate([
    property({ attribute: false })
], VariableRefView.prototype, "setData", void 0);
__decorate([
    property({ attribute: false })
], VariableRefView.prototype, "vars", void 0);
VariableRefView = __decorate([
    customElement('variable-ref-view')
], VariableRefView);
export { VariableRefView };
export const popCreateFilter = (target, props) => {
    popFilterableSimpleMenu(target, [
        ...props.vars.map(v => ({
            type: 'action',
            name: v.name,
            icon: renderUniLit(v.icon, {}),
            select: () => {
                props.onSelect(firstFilterByRef(props.vars, {
                    type: 'ref',
                    name: v.id,
                }));
            },
        })),
        {
            type: 'group',
            name: '',
            children: () => [
                {
                    type: 'action',
                    name: 'Add filter group',
                    icon: AddCursorIcon,
                    select: () => {
                        props.onSelect(firstFilterInGroup(props.vars));
                    },
                },
            ],
        },
    ], props.onClose);
};
//# sourceMappingURL=ref.js.map