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 } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { createRef } from 'lit/directives/ref.js';
import { html } from 'lit/static-html.js';
import { popMenu } from '../../../_common/components/menu/index.js';
import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js';
import { DatabaseDuplicate, DatabaseMoveLeft, DatabaseMoveRight, DeleteIcon, TextIcon, } from '../../../_common/icons/index.js';
let RecordField = class RecordField extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this.isFocus = false;
        this.editing = false;
        this._cell = createRef();
        this.changeEditing = (editing) => {
            const selection = this.closest('affine-data-view-record-detail')?.selection;
            if (selection) {
                selection.selection = {
                    propertyId: this.column.id,
                    isEditing: editing,
                };
            }
        };
        this._click = (e) => {
            e.stopPropagation();
            if (this.readonly)
                return;
            this.changeEditing(true);
        };
        this._clickLeft = (e) => {
            if (this.readonly)
                return;
            const ele = e.currentTarget;
            const columns = this.view.detailColumns;
            popMenu(ele, {
                options: {
                    input: {
                        initValue: this.column.name,
                        onComplete: text => {
                            this.column.updateName(text);
                        },
                    },
                    items: [
                        {
                            type: 'sub-menu',
                            name: 'Column Type',
                            icon: TextIcon,
                            hide: () => !this.column.updateType || this.column.type === 'title',
                            options: {
                                input: {
                                    search: true,
                                },
                                items: this.view.allColumnConfig
                                    .filter(v => v.type !== this.column.type)
                                    .map(config => {
                                    return {
                                        type: 'action',
                                        name: config.name,
                                        icon: html ` <uni-lit
                      .uni="${this.view.getIcon(config.type)}"
                    ></uni-lit>`,
                                        select: () => {
                                            this.column.updateType?.(config.type);
                                        },
                                    };
                                }),
                            },
                        },
                        {
                            type: 'action',
                            name: 'Duplicate Column',
                            icon: DatabaseDuplicate,
                            hide: () => !this.column.duplicate || this.column.type === 'title',
                            select: () => {
                                this.column.duplicate?.();
                            },
                        },
                        {
                            type: 'action',
                            name: 'Move Up',
                            icon: html ` <div
              style="transform: rotate(90deg);display:flex;align-items:center;"
            >
              ${DatabaseMoveLeft}
            </div>`,
                            hide: () => columns.findIndex(v => v === this.column.id) === 0,
                            select: () => {
                                const index = columns.findIndex(v => v === this.column.id);
                                const targetId = columns[index - 1];
                                if (!targetId) {
                                    return;
                                }
                                this.view.columnMove(this.column.id, {
                                    id: targetId,
                                    before: true,
                                });
                            },
                        },
                        {
                            type: 'action',
                            name: 'Move Down',
                            icon: html ` <div
              style="transform: rotate(90deg);display:flex;align-items:center;"
            >
              ${DatabaseMoveRight}
            </div>`,
                            hide: () => columns.findIndex(v => v === this.column.id) ===
                                columns.length - 1,
                            select: () => {
                                const index = columns.findIndex(v => v === this.column.id);
                                const targetId = columns[index + 1];
                                if (!targetId) {
                                    return;
                                }
                                this.view.columnMove(this.column.id, {
                                    id: targetId,
                                    before: false,
                                });
                            },
                        },
                        {
                            type: 'group',
                            name: 'operation',
                            children: () => [
                                {
                                    type: 'action',
                                    name: 'Delete Column',
                                    icon: DeleteIcon,
                                    hide: () => !this.column.delete || this.column.type === 'title',
                                    select: () => {
                                        this.column.delete?.();
                                    },
                                    class: 'delete-item',
                                },
                            ],
                        },
                    ],
                },
            });
        };
    }
    get readonly() {
        return this.view.readonly;
    }
    get cell() {
        return this._cell.value;
    }
    render() {
        const column = this.column;
        const props = {
            view: this.view,
            column: this.column,
            rowId: this.rowId,
            isEditing: this.editing,
            selectCurrentCell: this.changeEditing,
        };
        const { view, edit } = this.column.renderer;
        const contentClass = classMap({
            'field-content': true,
            'is-editing': this.editing,
            'is-focus': this.isFocus,
        });
        return html `
      <div class="field-left" @click="${this._clickLeft}">
        <div class="icon">
          <uni-lit .uni="${this.column.icon}"></uni-lit>
        </div>
        <div class="filed-name">${column.name}</div>
      </div>
      <div @click="${this._click}" class="${contentClass}">
        ${renderUniLit(this.editing && edit ? edit : view, props, {
            ref: this._cell,
            class: 'kanban-cell',
        })}
      </div>
    `;
    }
};
RecordField.styles = css `
    affine-data-view-record-field {
      display: flex;
      gap: 12px;
    }

    .field-left {
      padding: 4px 6px 4px 4px;
      display: flex;
      height: max-content;
      align-items: center;
      gap: 4px;
      font-size: var(--data-view-cell-text-size);
      line-height: var(--data-view-cell-text-line-height);
      color: var(--affine-text-secondary-color);
      width: 116px;
      border-radius: 4px;
      cursor: pointer;
    }

    .field-left:hover {
      background-color: var(--affine-hover-color);
    }

    affine-data-view-record-field .icon {
      display: flex;
      align-items: center;
      width: 16px;
      height: 16px;
    }

    affine-data-view-record-field .icon svg {
      width: 16px;
      height: 16px;
      fill: var(--affine-icon-color);
    }

    .filed-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .field-content {
      padding: 4px 6px;
      border-radius: 4px;
      flex: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      border: 1px solid transparent;
    }

    .field-content:hover {
      background-color: var(--affine-hover-color);
    }

    .field-content.is-editing {
      box-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.3);
    }

    .field-content.is-focus {
      border: 1px solid var(--affine-primary-color);
    }
  `;
__decorate([
    property({ attribute: false })
], RecordField.prototype, "view", void 0);
__decorate([
    property({ attribute: false })
], RecordField.prototype, "column", void 0);
__decorate([
    property({ attribute: false })
], RecordField.prototype, "rowId", void 0);
__decorate([
    state()
], RecordField.prototype, "isFocus", void 0);
__decorate([
    state()
], RecordField.prototype, "editing", void 0);
RecordField = __decorate([
    customElement('affine-data-view-record-field')
], RecordField);
export { RecordField };
//# sourceMappingURL=field.js.map