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 { repeat } from 'lit/directives/repeat.js';
import { popFilterableSimpleMenu } from '../../_common/components/menu/index.js';
import { PlusIcon } from '../../_common/icons/index.js';
import { GroupTitle } from '../common/group-by/group-title.js';
import { LEFT_TOOL_BAR_WIDTH } from './consts.js';
const styles = css `
  affine-data-view-table-group .group-header-op {
    visibility: visible;
  }
  .data-view-table-group-add-row {
    display: flex;
    width: 100%;
    height: 28px;
    position: relative;
    z-index: 0;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
    padding: 4px 8px;
    border-bottom: 1px solid var(--affine-border-color);
  }

  @media print {
    .data-view-table-group-add-row {
      display: none;
    }
  }

  .data-view-table-group-add-row-button {
    position: sticky;
    left: ${8 + LEFT_TOOL_BAR_WIDTH}px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    user-select: none;
    font-size: 12px;
    line-height: 20px;
    color: var(--affine-text-secondary-color);
  }
`;
let TableGroup = class TableGroup extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this.clickAddRow = () => {
            this.view.rowAdd('end', this.group?.key);
            requestAnimationFrame(() => {
                const selectionController = this.viewEle.selectionController;
                selectionController.selection = {
                    groupKey: this.group?.key,
                    focus: {
                        rowIndex: this.rows.length - 1,
                        columnIndex: 0,
                    },
                    isEditing: true,
                };
            });
        };
        this.clickAddRowInStart = () => {
            this.view.rowAdd('start', this.group?.key);
            requestAnimationFrame(() => {
                const selectionController = this.viewEle.selectionController;
                selectionController.selection = {
                    groupKey: this.group?.key,
                    focus: {
                        rowIndex: 0,
                        columnIndex: 0,
                    },
                    isEditing: true,
                };
            });
        };
        this.clickGroupOptions = (e) => {
            const group = this.group;
            if (!group) {
                return;
            }
            const ele = e.currentTarget;
            popFilterableSimpleMenu(ele, [
                {
                    type: 'action',
                    name: 'Ungroup',
                    hide: () => group.value == null,
                    select: () => {
                        group.rows.forEach(id => {
                            group.helper.removeFromGroup(id, group.key);
                        });
                    },
                },
                {
                    type: 'action',
                    name: 'Delete Cards',
                    select: () => {
                        this.view.rowDelete(group.rows);
                    },
                },
            ]);
        };
    }
    get rows() {
        return this.group?.rows ?? this.view.rows;
    }
    updated(_changedProperties) {
        super.updated(_changedProperties);
        this.querySelectorAll('data-view-table-row').forEach(ele => {
            ele.requestUpdate();
        });
    }
    renderRows(ids) {
        return html `
      <affine-database-column-header
        .tableViewManager="${this.view}"
      ></affine-database-column-header>
      <div class="affine-database-block-rows">
        ${repeat(ids, id => id, (id, idx) => {
            return html `<data-view-table-row
              data-row-index="${idx}"
              data-row-id="${id}"
              .view="${this.view}"
              .rowId="${id}"
              .rowIndex="${idx}"
            ></data-view-table-row>`;
        })}
      </div>
      ${this.view.readonly
            ? null
            : html ` <div
            class="data-view-table-group-add-row dv-hover"
            @click="${this.clickAddRow}"
          >
            <div
              class="data-view-table-group-add-row-button dv-icon-16"
              data-test-id="affine-database-add-row-button"
              role="button"
            >
              ${PlusIcon}<span>New Record</span>
            </div>
          </div>`}
    `;
    }
    render() {
        if (!this.group) {
            return this.renderRows(this.view.rows);
        }
        return html `
      <div
        style="position: sticky;left: 0;width: max-content;padding: 6px 0;margin-bottom: 4px;display:flex;align-items:center;gap: 12px;max-width: 400px"
      >
        ${GroupTitle(this.group, {
            readonly: this.view.readonly,
            clickAdd: this.clickAddRowInStart,
            clickOps: this.clickGroupOptions,
        })}
      </div>
      ${this.renderRows(this.group.rows)}
    `;
    }
};
TableGroup.styles = styles;
__decorate([
    property({ attribute: false })
], TableGroup.prototype, "view", void 0);
__decorate([
    property({ attribute: false })
], TableGroup.prototype, "viewEle", void 0);
__decorate([
    property({ attribute: false })
], TableGroup.prototype, "group", void 0);
TableGroup = __decorate([
    customElement('affine-data-view-table-group')
], TableGroup);
export { TableGroup };
//# sourceMappingURL=group.js.map