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 { PathFinder } from '@blockeditor/block-std';
import { assertExists, Slot } from '@blockeditor/global/utils';
import { ShadowlessElement, WithDisposable } from '@blockeditor/lit';
import { css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { createModal } from '../../../../../_common/components/menu/index.js';
import { renderTemplate } from '../../../../../_common/components/uni-component/render-template.js';
import { CrossIcon, ExpandWideIcon, } from '../../../../../_common/icons/index.js';
import { DatabaseSelection } from '../../../selection.js';
export function showDatabasePreviewModal(database) {
    const viewComponent = new DatabaseBlockModalPreview();
    viewComponent.database = database;
    const root = document.querySelector('editor-host');
    assertExists(root);
    const modal = createModal(root);
    const close = () => {
        modal.remove();
    };
    const container = renderTemplate(() => {
        return html `
      <style>
        .database-block-preview-container {
          position: absolute;
          display: flex;
          padding: 24px 53px;
          border-radius: 8px;
          left: 0;
          right: 0;
          margin: 20px auto auto;
          width: calc(100% - 300px);
          max-height: calc(100% - 40px);
          box-shadow: var(--affine-shadow-1);
          background-color: var(--affine-background-primary-color);
        }
        .database-block-preview-close {
          position: absolute;
          right: -48px;
          top: 0;
          padding: 10px;
          border-radius: 8px;
          cursor: pointer;
          display: flex;
          background-color: var(--affine-background-primary-color);
        }
        .database-block-preview-close svg {
          color: var(--affine-icon-color);
          width: 16px;
          height: 16px;
        }
        .database-block-preview-close:hover {
          background-color: var(--affine-hover-color-filled);
        }
      </style>
      <div class="database-block-preview-container">
        <database-block-modal-preview
          .database="${database}"
        ></database-block-modal-preview>
        <div @click="${close}" class="database-block-preview-close">
          ${CrossIcon}
        </div>
      </div>
    `;
    });
    container.onclick = e => {
        e.stopPropagation();
    };
    modal.onclick = close;
    modal.style.backgroundColor = 'var(--affine-black-60)';
    modal.append(container);
}
let ExpandDatabaseBlockModal = class ExpandDatabaseBlockModal extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this.expandDatabase = () => {
            const database = this.closest('affine-database');
            if (database) {
                showDatabasePreviewModal(database);
            }
        };
    }
    get database() {
        return this.closest('affine-database');
    }
    render() {
        if (this.closest('database-block-modal-preview') ||
            !this.database?.page.awarenessStore.getFlag('enable_expand_database_block')) {
            return;
        }
        return html ` <div
      @click="${this.expandDatabase}"
      class="dv-icon-20 dv-pd-2 dv-hover dv-round-4"
      style="display:flex;"
    >
      ${ExpandWideIcon}
    </div>`;
    }
};
ExpandDatabaseBlockModal = __decorate([
    customElement('expand-database-block-modal')
], ExpandDatabaseBlockModal);
export { ExpandDatabaseBlockModal };
let DatabaseBlockModalPreview = class DatabaseBlockModalPreview extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this.path = ['modal', 'preview'];
        this.selectionUpdated = new Slot();
        this.setSelection = selection => {
            this.database.host.selection.set(selection
                ? [new DatabaseSelection({ path: this.path, viewSelection: selection })]
                : []);
        };
        this.bindHotkey = hotkeys => {
            return {
                dispose: this.database.host.event.bindHotkey(hotkeys, {
                    path: [],
                }),
            };
        };
        this.handleEvent = (name, handler) => {
            return {
                dispose: this.database.host.event.add(name, handler, {
                    path: [],
                }),
            };
        };
    }
    connectedCallback() {
        super.connectedCallback();
        this.database.selection.slots.changed.on(selections => {
            const selection = selections.find(v => {
                return PathFinder.equals(v.path, this.path);
            });
            if (selection && selection instanceof DatabaseSelection) {
                this.selectionUpdated.emit(selection.viewSelection);
            }
            else {
                this.selectionUpdated.emit(undefined);
            }
        });
    }
    firstUpdated(_changedProperties) {
        super.firstUpdated(_changedProperties);
        requestAnimationFrame(() => {
            this.querySelector('affine-data-view-native')?.focusFirstCell();
        });
    }
    render() {
        const config = {
            bindHotkey: this.bindHotkey,
            handleEvent: this.handleEvent,
            getFlag: this.database.getFlag,
            selectionUpdated: this.selectionUpdated,
            setSelection: this.setSelection,
            dataSource: this.database.dataSource,
            viewSource: this.database.viewSource,
            headerComponent: this.database.headerComponent,
            std: this.database.std,
        };
        return html `
      <affine-data-view-native .config="${config}"></affine-data-view-native>
    `;
    }
};
DatabaseBlockModalPreview.styles = css `
    database-block-modal-preview {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
    }
  `;
__decorate([
    property({ attribute: false })
], DatabaseBlockModalPreview.prototype, "database", void 0);
DatabaseBlockModalPreview = __decorate([
    customElement('database-block-modal-preview')
], DatabaseBlockModalPreview);
export { DatabaseBlockModalPreview };
//# sourceMappingURL=index.js.map