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 './condition.js';
import { ShadowlessElement, WithDisposable } from '@blockeditor/lit';
import { css, html, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { repeat } from 'lit/directives/repeat.js';
import { eventToVRect, popFilterableSimpleMenu, } from '../../../_common/components/menu/menu.js';
import { ArrowDownSmallIcon, ConvertIcon, DeleteIcon, DuplicateIcon, MoreHorizontalIcon, PlusIcon, } from '../../../_common/icons/index.js';
import { firstFilter } from '../ast.js';
import { popAddNewFilter } from './condition.js';
let FilterGroupView = class FilterGroupView extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this.depth = 1;
        this.opMap = {
            and: 'And',
            or: 'Or',
        };
        this._setFilter = (index, filter) => {
            this.setData({
                ...this.data,
                conditions: this.data.conditions.map((v, i) => index === i ? filter : v),
            });
        };
        this._addNew = (e) => {
            if (this.isMaxDepth) {
                this.setData({
                    ...this.data,
                    conditions: [...this.data.conditions, firstFilter(this.vars)],
                });
                return;
            }
            popAddNewFilter(eventToVRect(e), {
                value: this.data,
                onChange: this.setData,
                vars: this.vars,
            });
        };
        this._selectOp = (event) => {
            popFilterableSimpleMenu(eventToVRect(event), [
                {
                    type: 'action',
                    name: 'And',
                    select: () => {
                        this.setData({
                            ...this.data,
                            op: 'and',
                        });
                    },
                },
                {
                    type: 'action',
                    name: 'Or',
                    select: () => {
                        this.setData({
                            ...this.data,
                            op: 'or',
                        });
                    },
                },
            ]);
        };
    }
    _clickConditionOps(target, i) {
        const filter = this.data.conditions[i];
        popFilterableSimpleMenu(target, [
            {
                type: 'action',
                name: filter.type === 'filter' ? 'Turn into group' : 'Wrap in group',
                icon: ConvertIcon,
                onHover: hover => {
                    this.containerClass = hover
                        ? { index: i, class: 'hover-style' }
                        : undefined;
                },
                hide: () => this.depth + getDepth(filter) > 3,
                select: () => {
                    this.setData({ type: 'group', op: 'and', conditions: [this.data] });
                },
            },
            {
                type: 'action',
                name: 'Duplicate',
                icon: DuplicateIcon,
                onHover: hover => {
                    this.containerClass = hover
                        ? { index: i, class: 'hover-style' }
                        : undefined;
                },
                select: () => {
                    const conditions = [...this.data.conditions];
                    conditions.splice(i + 1, 0, JSON.parse(JSON.stringify(conditions[i])));
                    this.setData({ ...this.data, conditions: conditions });
                },
            },
            {
                type: 'group',
                name: '',
                children: () => [
                    {
                        type: 'action',
                        name: 'Delete',
                        icon: DeleteIcon,
                        class: 'delete-item',
                        onHover: hover => {
                            this.containerClass = hover
                                ? { index: i, class: 'delete-style' }
                                : undefined;
                        },
                        select: () => {
                            const conditions = [...this.data.conditions];
                            conditions.splice(i, 1);
                            this.setData({
                                ...this.data,
                                conditions,
                            });
                        },
                    },
                ],
            },
        ]);
    }
    get isMaxDepth() {
        return this.depth === 3;
    }
    render() {
        const data = this.data;
        return html `
      <div class="filter-group-container">
        ${repeat(data.conditions, (filter, i) => {
            const clickOps = (e) => {
                e.stopPropagation();
                e.preventDefault();
                this._clickConditionOps(eventToVRect(e), i);
            };
            let op;
            if (i === 0) {
                op = html ` <div class="filter-group-op">Where</div>`;
            }
            else {
                op = html `
              <div
                class="filter-group-op filter-group-op-clickable"
                @click="${this._selectOp}"
              >
                ${this.opMap[data.op]}
              </div>
            `;
            }
            const classList = classMap({
                'filter-root-item': true,
                'filter-exactly-hover-container': true,
                'dv-pd-4 dv-round-4': true,
                [this.containerClass?.class ?? '']: this.containerClass?.index === i,
            });
            const groupClassList = classMap({
                [`filter-group-bg-${this.depth}`]: filter.type !== 'filter',
            });
            return html ` <div class="${classList}" @contextmenu="${clickOps}">
            ${op}
            <div
              style="flex:1;display:flex;align-items:start;justify-content: space-between;gap: 8px;"
            >
              ${filter.type === 'filter'
                ? html `
                    <filter-condition-view
                      .setData="${(v) => this._setFilter(i, v)}"
                      .vars="${this.vars}"
                      .data="${filter}"
                    ></filter-condition-view>
                  `
                : html `
                    <filter-group-view
                      class="${groupClassList}"
                      style="width: 100%;"
                      .depth="${this.depth + 1}"
                      .setData="${(v) => this._setFilter(i, v)}"
                      .vars="${this.vars}"
                      .data="${filter}"
                    ></filter-group-view>
                  `}
              <div class="filter-group-item-ops" @click="${clickOps}">
                ${MoreHorizontalIcon}
              </div>
            </div>
          </div>`;
        })}
      </div>
      <div class="filter-group-button" @click="${this._addNew}">
        ${PlusIcon} Add ${this.isMaxDepth ? nothing : ArrowDownSmallIcon}
      </div>
    `;
    }
};
FilterGroupView.styles = css `
    filter-group-view {
      border-radius: 4px;
      padding: 8px 4px 4px;
      display: flex;
      flex-direction: column;
      user-select: none;
    }

    .filter-group-op {
      width: 60px;
      display: flex;
      justify-content: end;
      padding: 4px;
      height: 34px;
      align-items: center;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
      color: var(--affine-text-primary-color);
    }

    .filter-group-op-clickable {
      border-radius: 4px;
      cursor: pointer;
    }

    .filter-group-op-clickable:hover {
      background-color: var(--affine-hover-color);
    }

    .filter-group-container {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .filter-group-button {
      padding: 8px 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      line-height: 22px;
      border-radius: 4px;
      cursor: pointer;
      color: var(--affine-text-secondary-color);
    }

    .filter-group-button svg {
      fill: var(--affine-text-secondary-color);
      color: var(--affine-text-secondary-color);
      width: 20px;
      height: 20px;
    }

    .filter-group-button:hover {
      background-color: var(--affine-hover-color);
      color: var(--affine-text-primary-color);
    }

    .filter-group-button:hover svg {
      fill: var(--affine-text-primary-color);
      color: var(--affine-text-primary-color);
    }

    .filter-group-item {
      padding: 4px 0;
      display: flex;
      align-items: start;
      gap: 8px;
    }

    .filter-group-item-ops {
      margin-top: 4px;
      padding: 4px;
      border-radius: 4px;
      height: max-content;
      display: flex;
      cursor: pointer;
    }

    .filter-group-item-ops:hover {
      background-color: var(--affine-hover-color);
    }

    .filter-group-item-ops svg {
      fill: var(--affine-text-secondary-color);
      color: var(--affine-text-secondary-color);
      width: 18px;
      height: 18px;
    }

    .filter-group-item-ops:hover svg {
      fill: var(--affine-text-primary-color);
      color: var(--affine-text-primary-color);
    }

    .delete-style {
      background-color: var(--affine-background-error-color);
    }

    .filter-group-border {
      border: 1px dashed var(--affine-border-color);
    }

    .filter-group-bg-1 {
      background-color: var(--affine-background-secondary-color);
      border: 1px solid var(--affine-border-color);
    }

    .filter-group-bg-2 {
      background-color: var(--affine-background-tertiary-color);
      border: 1px solid var(--affine-border-color);
    }
    .hover-style {
      background-color: var(--affine-hover-color);
    }

    .delete-style {
      background-color: var(--affine-background-error-color);
    }
  `;
__decorate([
    property({ attribute: false })
], FilterGroupView.prototype, "depth", void 0);
__decorate([
    property({ attribute: false })
], FilterGroupView.prototype, "data", void 0);
__decorate([
    property({ attribute: false })
], FilterGroupView.prototype, "vars", void 0);
__decorate([
    property({ attribute: false })
], FilterGroupView.prototype, "setData", void 0);
__decorate([
    state()
], FilterGroupView.prototype, "containerClass", void 0);
FilterGroupView = __decorate([
    customElement('filter-group-view')
], FilterGroupView);
export { FilterGroupView };
export const getDepth = (filter) => {
    if (filter.type === 'filter') {
        return 1;
    }
    return Math.max(...filter.conditions.map(getDepth)) + 1;
};
//# sourceMappingURL=filter-group.js.map