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 '../ref/ref.js';
import '../literal/define.js';
import { ShadowlessElement, WithDisposable } from '@blockeditor/lit';
import { css, html, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import { popFilterableSimpleMenu } from '../../../_common/components/menu/menu.js';
import { CrossIcon } from '../../../_common/icons/index.js';
import { tBoolean } from '../../logical/data-type.js';
import { typesystem } from '../../logical/typesystem.js';
import { firstFilter, firstFilterByRef, firstFilterInGroup, getRefType, } from '../ast.js';
import { popLiteralEdit, renderLiteral } from '../literal/matcher.js';
import { filterMatcher } from './matcher/matcher.js';
let FilterConditionView = class FilterConditionView extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this._setRef = (ref) => {
            this.setData(firstFilterByRef(this.vars, ref));
        };
    }
    _filterLabel() {
        return filterMatcher.find(v => v.data.name === this.data.function)?.data
            .label;
    }
    _filterList() {
        const type = getRefType(this.vars, this.data.left);
        if (!type) {
            return [];
        }
        return filterMatcher.allMatchedData(type);
    }
    _selectFilter(e) {
        const target = e.currentTarget;
        const list = this._filterList();
        popFilterableSimpleMenu(target, list.map(v => {
            const selected = v.name === this.data.function;
            return {
                type: 'action',
                name: v.label,
                isSelected: selected,
                select: () => {
                    this.setData({
                        ...this.data,
                        function: v.name,
                    });
                },
            };
        }));
    }
    _args() {
        const fn = filterMatcher.find(v => v.data.name === this.data.function);
        if (!fn) {
            return [];
        }
        const refType = getRefType(this.vars, this.data.left);
        if (!refType) {
            return [];
        }
        const type = typesystem.instance({}, [refType], tBoolean.create(), fn.type);
        return type.args.slice(1);
    }
    render() {
        const data = this.data;
        return html `
      <div class="filter-condition-expression">
        <variable-ref-view
          .data="${data.left}"
          .setData="${this._setRef}"
          .vars="${this.vars}"
          style="height: 24px"
        ></variable-ref-view>
        <div
          class="filter-condition-function-name"
          @click="${this._selectFilter}"
        >
          ${this._filterLabel()}
        </div>
        ${repeat(this._args(), (v, i) => {
            const value = this.data.args[i];
            const onChange = (value) => {
                const newArr = this.data.args.slice();
                newArr[i] = { type: 'literal', value };
                this.setData({
                    ...this.data,
                    args: newArr,
                });
            };
            const click = (e) => {
                popLiteralEdit(e.currentTarget, v, value?.value, onChange);
            };
            return html ` <div
            class="dv-hover dv-round-4 filter-condition-arg"
            @click="${click}"
          >
            ${renderLiteral(v, value?.value, onChange)}
          </div>`;
        })}
      </div>
      ${this.onDelete
            ? html ` <div
            @click="${this.onDelete}"
            class="dv-icon-16 dv-round-4 dv-pd-4 dv-hover"
            style="display:flex;align-items:center;"
          >
            ${CrossIcon}
          </div>`
            : nothing}
    `;
    }
};
FilterConditionView.styles = css `
    filter-condition-view {
      display: flex;
      align-items: center;
      padding: 4px;
      gap: 16px;
      border: 1px solid var(--affine-border-color);
      border-radius: 8px;
      background-color: var(--affine-white);
    }

    .filter-condition-expression {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .filter-condition-delete {
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: max-content;
      cursor: pointer;
    }

    .filter-condition-delete:hover {
      background-color: var(--affine-hover-color);
    }

    .filter-condition-delete svg {
      width: 16px;
      height: 16px;
    }

    .filter-condition-function-name {
      font-size: 12px;
      line-height: 20px;
      color: var(--affine-text-secondary-color);
      padding: 2px 8px;
      border-radius: 4px;
      cursor: pointer;
    }

    .filter-condition-function-name:hover {
      background-color: var(--affine-hover-color);
    }

    .filter-condition-arg {
      font-size: 12px;
      font-style: normal;
      font-weight: 600;
      padding: 0 4px;
      height: 100%;
      display: flex;
      align-items: center;
    }
  `;
__decorate([
    property({ attribute: false })
], FilterConditionView.prototype, "data", void 0);
__decorate([
    property({ attribute: false })
], FilterConditionView.prototype, "setData", void 0);
__decorate([
    property({ attribute: false })
], FilterConditionView.prototype, "vars", void 0);
__decorate([
    property({ attribute: false })
], FilterConditionView.prototype, "onDelete", void 0);
FilterConditionView = __decorate([
    customElement('filter-condition-view')
], FilterConditionView);
export { FilterConditionView };
export const popAddNewFilter = (target, props) => {
    popFilterableSimpleMenu(target, [
        {
            type: 'action',
            name: 'Add filter',
            select: () => {
                props.onChange({
                    ...props.value,
                    conditions: [...props.value.conditions, firstFilter(props.vars)],
                });
            },
        },
        {
            type: 'action',
            name: 'Add filter group',
            select: () => {
                props.onChange({
                    ...props.value,
                    conditions: [
                        ...props.value.conditions,
                        firstFilterInGroup(props.vars),
                    ],
                });
            },
        },
    ]);
};
//# sourceMappingURL=condition.js.map