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 './field.js';
import { ShadowlessElement, WithDisposable } from '@blockeditor/lit';
import { css, nothing, unsafeCSS } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import { html } from 'lit/static-html.js';
import { popFilterableSimpleMenu } from '../../../_common/components/menu/index.js';
import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js';
import { PlusIcon } from '../../../_common/icons/index.js';
import { dataViewCommonStyle } from '../css-variable.js';
import { DetailSelection } from './selection.js';
const styles = css `
  ${unsafeCSS(dataViewCommonStyle('affine-data-view-record-detail'))}
  affine-data-view-record-detail {
    display: flex;
    flex-direction: column;
    padding: 0 36px;
    gap: 12px;
    height: 100%;
  }

  .add-property {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--data-view-cell-text-size);
    font-style: normal;
    font-weight: 400;
    line-height: var(--data-view-cell-text-line-height);
    color: var(--affine-text-secondary-color);
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
  }

  .add-property:hover {
    background-color: var(--affine-hover-color);
  }

  .add-property .icon {
    display: flex;
    align-items: center;
  }

  .add-property .icon svg {
    fill: var(--affine-icon-color);
    width: 20px;
    height: 20px;
  }
`;
let RecordDetail = class RecordDetail extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this.selection = new DetailSelection(this);
        this._clickAddProperty = () => {
            popFilterableSimpleMenu(this.addPropertyButton, this.view.allColumnConfig.map(config => {
                return {
                    type: 'action',
                    name: config.name,
                    icon: html ` <uni-lit
            .uni="${this.view.getIcon(config.type)}"
          ></uni-lit>`,
                    select: () => {
                        this.view.columnAdd('end', config.type);
                    },
                };
            }));
        };
    }
    get readonly() {
        return this.view.readonly;
    }
    connectedCallback() {
        super.connectedCallback();
        this.disposables.add(this.view.slots.update.on(() => {
            this.requestUpdate();
        }));
        this.disposables.addFromEvent(this, 'click', e => {
            e.stopPropagation();
            this.selection.selection = undefined;
        });
        //FIXME: simulate as a widget
        this.setAttribute('data-widget-id', 'affine-detail-widget');
    }
    get columns() {
        return this.view.detailColumns.map(id => this.view.columnGet(id));
    }
    render() {
        const columns = this.columns;
        return html `
      ${this.renderHeader()}
      ${repeat(columns, v => v, column => {
            return html ` <affine-data-view-record-field
            .view="${this.view}"
            .column="${column}"
            .rowId="${this.rowId}"
            data-column-id="${column.id}"
          ></affine-data-view-record-field>`;
        })}
      ${!this.readonly
            ? html `<div class="add-property" @click="${this._clickAddProperty}">
            <div class="icon">${PlusIcon}</div>
            Add Property
          </div>`
            : nothing}
    `;
    }
    renderHeader() {
        const header = this.view.detailSlots.header;
        if (header) {
            const props = {
                view: this.view,
                rowId: this.rowId,
            };
            return renderUniLit(header, props);
        }
        return undefined;
    }
};
RecordDetail.styles = styles;
__decorate([
    property({ attribute: false })
], RecordDetail.prototype, "view", void 0);
__decorate([
    property({ attribute: false })
], RecordDetail.prototype, "rowId", void 0);
__decorate([
    query('.add-property')
], RecordDetail.prototype, "addPropertyButton", void 0);
RecordDetail = __decorate([
    customElement('affine-data-view-record-detail')
], RecordDetail);
export { RecordDetail };
//# sourceMappingURL=detail.js.map