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;
};
/// <reference types="vite/client" />
import '../_common/components/rich-text/rich-text.js';
import { assertExists } from '@blockeditor/global/utils';
import { BlockElement, getInlineRangeProvider } from '@blockeditor/lit';
import { html, nothing } from 'lit';
import { customElement, query, state } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
import { bindContainerHotkey } from '../_common/components/rich-text/keymap/index.js';
import { BLOCK_CHILDREN_CONTAINER_PADDING_LEFT } from '../_common/consts.js';
import { styles } from './styles.js';
import { ListIcon } from './utils/get-list-icon.js';
import { getListInfo } from './utils/get-list-info.js';
import { playCheckAnimation, toggleDown, toggleRight } from './utils/icons.js';
let ListBlockComponent = class ListBlockComponent extends BlockElement {
    constructor() {
        super(...arguments);
        this._isCollapsedWhenReadOnly = !!this.model?.collapsed;
        this._onClickIcon = (e) => {
            e.stopPropagation();
            if (this.model.type === 'toggle') {
                this._toggleChildren();
                return;
            }
            else if (this.model.type === 'todo') {
                this.model.page.captureSync();
                const checkedPropObj = { checked: !this.model.checked };
                this.model.page.updateBlock(this.model, checkedPropObj);
                if (this.model.checked) {
                    const checkEl = this.querySelector('.affine-list-block__todo-prefix');
                    assertExists(checkEl);
                    playCheckAnimation(checkEl).catch(console.error);
                }
                return;
            }
            this._select();
        };
        this._inlineRangeProvider = null;
    }
    get inlineManager() {
        const inlineManager = this.service?.inlineManager;
        assertExists(inlineManager);
        return inlineManager;
    }
    get attributesSchema() {
        return this.inlineManager.getSchema();
    }
    get attributeRenderer() {
        return this.inlineManager.getRenderer();
    }
    get markdownShortcutHandler() {
        return this.inlineManager.markdownShortcutHandler;
    }
    get embedChecker() {
        return this.inlineManager.embedChecker;
    }
    _select() {
        const selection = this.host.selection;
        selection.update(selList => {
            return selList
                .filter(sel => !sel.is('text') && !sel.is('block'))
                .concat(selection.create('block', { path: this.path }));
        });
    }
    async getUpdateComplete() {
        const result = await super.getUpdateComplete();
        await this._richTextElement?.updateComplete;
        return result;
    }
    firstUpdated() {
        this._updateFollowingListSiblings();
        this.model.childrenUpdated.on(() => {
            this._updateFollowingListSiblings();
        });
    }
    _updateFollowingListSiblings() {
        this.updateComplete
            .then(() => {
            let current = this;
            while (current && current.tagName == 'AFFINE-LIST') {
                current.requestUpdate();
                current = this.std.view.findNext(current.path, () => {
                    return true;
                })?.view;
            }
        })
            .catch(console.error);
    }
    connectedCallback() {
        super.connectedCallback();
        bindContainerHotkey(this);
        this._inlineRangeProvider = getInlineRangeProvider(this);
    }
    _toggleChildren() {
        if (this.page.readonly) {
            this._isCollapsedWhenReadOnly = !this._isCollapsedWhenReadOnly;
            return;
        }
        const newCollapsedState = !this.model.collapsed;
        this._isCollapsedWhenReadOnly = newCollapsedState;
        this.page.captureSync();
        this.page.updateBlock(this.model, {
            collapsed: newCollapsedState,
        });
    }
    _toggleTemplate(isCollapsed) {
        const noChildren = this.model.children.length === 0;
        if (noChildren)
            return nothing;
        const toggleDownTemplate = html `<div
      class="toggle-icon"
      @click=${this._toggleChildren}
    >
      ${toggleDown}
    </div>`;
        const toggleRightTemplate = html `<div
      class="toggle-icon toggle-icon__collapsed"
      @click=${this._toggleChildren}
    >
      ${toggleRight}
    </div>`;
        return isCollapsed ? toggleRightTemplate : toggleDownTemplate;
    }
    render() {
        const { deep, index } = getListInfo(this.model);
        const { model, _onClickIcon } = this;
        const collapsed = this.page.readonly
            ? this._isCollapsedWhenReadOnly
            : !!model.collapsed;
        const listIcon = ListIcon(model, !collapsed, _onClickIcon);
        // For the first list item, we need to add a margin-top to make it align with the text
        const shouldAddMarginTop = index === 0 && deep === 0;
        const top = shouldAddMarginTop ? 'affine-list-block-container--first' : '';
        const checked = this.model.type === 'todo' && this.model.checked
            ? 'affine-list--checked'
            : '';
        const children = html `<div
      class="affine-block-children-container"
      style="padding-left: ${BLOCK_CHILDREN_CONTAINER_PADDING_LEFT}px"
    >
      ${this.renderModelChildren(this.model)}
    </div>`;
        return html `
      <div class=${`affine-list-block-container ${top}`}>
        <div class=${`affine-list-rich-text-wrapper ${checked}`}>
          ${this._toggleTemplate(collapsed)} ${listIcon}
          <rich-text
            .yText=${this.model.text.yText}
            .undoManager=${this.model.page.history}
            .attributeRenderer=${this.attributeRenderer}
            .attributesSchema=${this.attributesSchema}
            .markdownShortcutHandler=${this.markdownShortcutHandler}
            .embedChecker=${this.embedChecker}
            .readonly=${this.model.page.readonly}
            .inlineRangeProvider=${this._inlineRangeProvider}
            .enableClipboard=${false}
            .enableUndoRedo=${false}
          ></rich-text>
        </div>
        ${collapsed ? nothing : children}
        ${when(this.selected?.is('block'), () => html `<affine-block-selection></affine-block-selection>`)}
      </div>
    `;
    }
};
ListBlockComponent.styles = styles;
__decorate([
    state()
], ListBlockComponent.prototype, "_isCollapsedWhenReadOnly", void 0);
__decorate([
    query('rich-text')
], ListBlockComponent.prototype, "_richTextElement", void 0);
ListBlockComponent = __decorate([
    customElement('affine-list')
], ListBlockComponent);
export { ListBlockComponent };
//# sourceMappingURL=list-block.js.map