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, unsafeCSS } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import Sortable from 'sortablejs';
import { popMenu } from '../../../_common/components/menu/index.js';
import { menuTitleItem } from '../../../_common/components/menu/title.js';
import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js';
import { ArrowRightSmallIcon, DeleteIcon, } from '../../../_common/icons/index.js';
import { DataViewKanbanManager } from '../../kanban/kanban-view-manager.js';
import { DataViewTableManager } from '../../table/table-view-manager.js';
import { dataViewCssVariable } from '../css-variable.js';
import { groupByMatcher } from './matcher.js';
let GroupSetting = class GroupSetting extends WithDisposable(ShadowlessElement) {
    connectedCallback() {
        super.connectedCallback();
        this._disposables.add(this.view.slots.update.on(() => {
            this.requestUpdate();
        }));
        this._disposables.addFromEvent(this, 'pointerdown', e => {
            e.stopPropagation();
        });
    }
    firstUpdated(_changedProperties) {
        super.firstUpdated(_changedProperties);
        const sortable = new Sortable(this.groupContainer, {
            animation: 150,
            group: `group-sort-${this.view.id}`,
            onEnd: evt => {
                const groupHelper = this.view.groupHelper;
                if (!groupHelper) {
                    return;
                }
                const groups = [...groupHelper.groups];
                const index = evt.oldIndex ?? -1;
                const from = groups[index];
                groups.splice(index, 1);
                const to = groups[evt.newIndex ?? -1];
                groupHelper.moveGroupTo(from.key, to
                    ? {
                        before: true,
                        id: to.key,
                    }
                    : 'end');
            },
        });
        this._disposables.add({
            dispose: () => sortable.destroy(),
        });
    }
    render() {
        const helper = this.view.groupHelper;
        if (!helper) {
            return;
        }
        return html `
      <div style="padding: 7px 12px;">
        <div
          style="padding: 0 4px; font-size: 12px;color: var(--affine-text-secondary-color);line-height: 20px;"
        >
          Groups
        </div>
        <div></div>
      </div>
      <div
        style="display:flex;flex-direction: column;gap: 4px;"
        class="group-sort-setting"
      >
        ${repeat(helper.groups, group => group.key, group => {
            const props = {
                value: group.value,
                data: group.helper.data,
                readonly: true,
            };
            const config = group.helper.groupConfig();
            return html ` <div class="dv-hover dv-round-4 group-item">
              <div class="group-item-drag-bar"></div>
              <div style="padding: 0 4px;position:relative;">
                ${renderUniLit(config?.view, props)}
                <div
                  style="position:absolute;left: 0;top: 0;right: 0;bottom: 0;"
                ></div>
              </div>
            </div>`;
        })}
      </div>
    `;
    }
};
GroupSetting.styles = css `
    data-view-group-setting {
      display: flex;
      flex-direction: column;
      gap: 4px;
      ${unsafeCSS(dataViewCssVariable())};
    }
    .group-item {
      display: flex;
      padding: 4px 12px;
      position: relative;
      cursor: grab;
    }

    .group-item-drag-bar {
      width: 4px;
      height: 12px;
      border-radius: 1px;
      background-color: #efeff0;
      position: absolute;
      left: 4px;
      top: 0;
      bottom: 0;
      margin: auto;
    }

    .group-item:hover .group-item-drag-bar {
      background-color: #c0bfc1;
    }
  `;
__decorate([
    property({ attribute: false })
], GroupSetting.prototype, "view", void 0);
__decorate([
    query('.group-sort-setting')
], GroupSetting.prototype, "groupContainer", void 0);
GroupSetting = __decorate([
    customElement('data-view-group-setting')
], GroupSetting);
export { GroupSetting };
export const selectGroupByProperty = (view, onClose) => {
    return {
        onClose,
        input: {
            search: true,
            placeholder: 'Search',
        },
        items: [
            ...view.columnsWithoutFilter
                .filter(id => {
                if (view.columnGet(id).type === 'title') {
                    return false;
                }
                return !!groupByMatcher.match(view.columnGet(id).dataType);
            })
                .map(id => {
                const column = view.columnGet(id);
                return {
                    type: 'action',
                    name: column.name,
                    isSelected: view.view.groupBy?.columnId === id,
                    icon: html ` <uni-lit .uni="${column.icon}"></uni-lit>`,
                    select: () => {
                        view.changeGroup(id);
                    },
                };
            }),
            {
                type: 'group',
                name: '',
                hide: () => view instanceof DataViewKanbanManager || view.view.groupBy == null,
                children: () => [
                    {
                        type: 'action',
                        icon: DeleteIcon,
                        class: 'delete-item',
                        name: 'Remove Grouping',
                        select: () => {
                            if (view instanceof DataViewTableManager) {
                                view.changeGroup(undefined);
                            }
                        },
                    },
                ],
            },
        ],
    };
};
export const popSelectGroupByProperty = (target, view, onClose) => {
    popMenu(target, {
        options: selectGroupByProperty(view, onClose),
    });
};
export const popGroupSetting = (target, view, onBack) => {
    const groupBy = view.view.groupBy;
    if (groupBy == null) {
        return;
    }
    const reopen = () => {
        popGroupSetting(target, view, onBack);
    };
    const type = view.columnGetType(groupBy.columnId);
    const icon = view.getIcon(type);
    const menuHandler = popMenu(target, {
        options: {
            input: {
                search: true,
            },
            items: [
                menuTitleItem('GROUP', () => {
                    onBack();
                    menuHandler.close();
                }),
                {
                    type: 'group',
                    name: '',
                    children: () => [
                        {
                            type: 'sub-menu',
                            name: 'Group By',
                            postfix: html `
                <div
                  style="display:flex;align-items:center;gap: 4px;font-size: 12px;line-height: 20px;color: var(--affine-text-secondary-color);margin-right: 4px;margin-left: 8px;"
                  class="dv-icon-16"
                >
                  ${renderUniLit(icon, {})}
                  ${view.columnGetName(groupBy.columnId)}
                </div>
                ${ArrowRightSmallIcon}
              `,
                            options: selectGroupByProperty(view, reopen),
                        },
                    ],
                },
                {
                    type: 'group',
                    name: '',
                    children: () => [
                        {
                            type: 'custom',
                            render: html ` <data-view-group-setting
                .view="${view}"
                .columnId="${groupBy.columnId}"
              ></data-view-group-setting>`,
                        },
                    ],
                },
            ],
        },
    });
};
//# sourceMappingURL=setting.js.map