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 } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { html } from 'lit/static-html.js';
import { popMenu } from '../../_common/components/menu/index.js';
const styles = css `
  affine-data-view-kanban-header {
    display: flex;
    justify-content: space-between;
    padding: 4px;
  }

  .select-group {
    border-radius: 8px;
    padding: 4px 8px;
    cursor: pointer;
  }

  .select-group:hover {
    background-color: var(--affine-hover-color);
  }
`;
let KanbanHeader = class KanbanHeader extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this.clickGroup = (e) => {
            popMenu(e.target, {
                options: {
                    input: {
                        search: true,
                    },
                    items: this.view.columnManagerList
                        .filter(column => column.id !== this.view.view.groupBy?.columnId)
                        .map(column => {
                        return {
                            type: 'action',
                            name: column.name,
                            select: () => {
                                this.view.changeGroup(column.id);
                            },
                        };
                    }),
                },
            });
        };
    }
    render() {
        return html `
      <div></div>
      <div>
        <div class="select-group" @click="${this.clickGroup}">Group</div>
      </div>
    `;
    }
};
KanbanHeader.styles = styles;
__decorate([
    property({ attribute: false })
], KanbanHeader.prototype, "view", void 0);
KanbanHeader = __decorate([
    customElement('affine-data-view-kanban-header')
], KanbanHeader);
export { KanbanHeader };
//# sourceMappingURL=header.js.map