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 './card.js';
import { ShadowlessElement, WithDisposable } from '@blockeditor/lit';
import { css, nothing } from 'lit';
import { customElement, property } 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 { AddCursorIcon } from '../../_common/icons/index.js';
import { GroupTitle } from '../common/group-by/group-title.js';
const styles = css `
  affine-data-view-kanban-group {
    width: 260px;
    flex-shrink: 0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
  }

  .group-header {
    height: 32px;
    padding: 6px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    overflow: hidden;
  }

  .group-header-title {
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--data-view-cell-text-size);
  }

  affine-data-view-kanban-group:hover .group-header-op {
    visibility: visible;
    opacity: 1;
  }

  .group-body {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    padding: 0 4px;
    gap: 12px;
  }

  .add-card {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--data-view-cell-text-size);
    line-height: var(--data-view-cell-text-line-height);
    visibility: hidden;
    opacity: 0;
    transition: all 150ms cubic-bezier(0.42, 0, 1, 1);
    color: var(--affine-text-secondary-color);
  }

  affine-data-view-kanban-group:hover .add-card {
    visibility: visible;
    opacity: 1;
  }

  affine-data-view-kanban-group .add-card:hover {
    background-color: var(--affine-hover-color);
    color: var(--affine-text-primary-color);
  }

  affine-data-view-kanban-group:has(.add-card:hover) .add-card {
    background-color: var(--affine-hover-color);
    color: var(--affine-text-primary-color);
  }

  .sortable-ghost {
    background-color: var(--affine-hover-color);
    opacity: 0.5;
  }

  .sortable-drag {
    background-color: var(--affine-background-primary-color);
  }
`;
let KanbanGroup = class KanbanGroup extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this.clickAddCard = () => {
            const id = this.view.addCard('end', this.group.key);
            requestAnimationFrame(() => {
                const kanban = this.closest('affine-data-view-kanban');
                if (kanban) {
                    kanban.selectionController.selection = {
                        selectionType: 'cell',
                        groupKey: this.group.key,
                        cardId: id,
                        columnId: this.view.header.titleColumn || this.view.columns[0],
                        isEditing: true,
                    };
                }
            });
        };
        this.clickAddCardInStart = () => {
            const id = this.view.addCard('start', this.group.key);
            requestAnimationFrame(() => {
                const kanban = this.closest('affine-data-view-kanban');
                if (kanban) {
                    kanban.selectionController.selection = {
                        selectionType: 'cell',
                        groupKey: this.group.key,
                        cardId: id,
                        columnId: this.view.header.titleColumn || this.view.columns[0],
                        isEditing: true,
                    };
                }
            });
        };
        this.clickGroupOptions = (e) => {
            const ele = e.currentTarget;
            popFilterableSimpleMenu(ele, [
                {
                    type: 'action',
                    name: 'Ungroup',
                    hide: () => this.group.value == null,
                    select: () => {
                        this.group.rows.forEach(id => {
                            this.group.helper.removeFromGroup(id, this.group.key);
                        });
                    },
                },
                {
                    type: 'action',
                    name: 'Delete Cards',
                    select: () => {
                        this.view.rowDelete(this.group.rows);
                    },
                },
            ]);
        };
    }
    render() {
        const cards = this.group.rows;
        return html `
      <div class="group-header">
        ${GroupTitle(this.group, {
            readonly: this.view.readonly,
            clickAdd: this.clickAddCardInStart,
            clickOps: this.clickGroupOptions,
        })}
      </div>
      <div class="group-body">
        ${repeat(cards, id => id, id => {
            return html `
              <affine-data-view-kanban-card
                data-card-id="${id}"
                .groupKey="${this.group.key}"
                .view="${this.view}"
                .cardId="${id}"
              ></affine-data-view-kanban-card>
            `;
        })}
        ${this.view.readonly
            ? nothing
            : html `<div class="add-card" @click="${this.clickAddCard}">
              <div
                style="margin-right: 4px;width: 16px;height: 16px;display:flex;align-items:center;"
              >
                ${AddCursorIcon}
              </div>
              Add
            </div>`}
      </div>
    `;
    }
};
KanbanGroup.styles = styles;
__decorate([
    property({ attribute: false })
], KanbanGroup.prototype, "view", void 0);
__decorate([
    property({ attribute: false })
], KanbanGroup.prototype, "group", void 0);
KanbanGroup = __decorate([
    customElement('affine-data-view-kanban-group')
], KanbanGroup);
export { KanbanGroup };
//# sourceMappingURL=group.js.map