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 './cell.js';
import { ShadowlessElement, WithDisposable } from '@blockeditor/lit';
import { css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { repeat } from 'lit/directives/repeat.js';
import { html } from 'lit/static-html.js';
import { positionToVRect } from '../../_common/components/menu/index.js';
import { MoreHorizontalIcon, NewEditIcon } from '../../_common/icons/index.js';
import { getPageByElement } from '../../_common/utils/query.js';
import { popSideDetail } from '../common/detail/layout.js';
import { openDetail, popCardMenu } from './menu.js';
const styles = css `
  affine-data-view-kanban-card {
    display: flex;
    position: relative;
    flex-direction: column;
    border: 1px solid var(--affine-border-color);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    transition: background-color 100ms ease-in-out;
    background-color: var(--affine-background-kanban-card-color);
  }

  affine-data-view-kanban-card:hover {
    background-color: var(--affine-hover-color);
  }

  affine-data-view-kanban-card .card-header {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  affine-data-view-kanban-card .card-header-title uni-lit {
    width: 100%;
  }

  .card-header.has-divider {
    border-bottom: 0.5px solid var(--affine-border-color);
  }

  affine-data-view-kanban-card .card-header-title {
    font-size: var(--data-view-cell-text-size);
    line-height: var(--data-view-cell-text-line-height);
  }

  affine-data-view-kanban-card .card-header-icon {
    padding: 4px;
    background-color: var(--affine-background-secondary-color);
    display: flex;
    align-items: center;
    border-radius: 4px;
    width: max-content;
  }

  affine-data-view-kanban-card .card-header-icon svg {
    width: 16px;
    height: 16px;
    fill: var(--affine-icon-color);
    color: var(--affine-icon-color);
  }

  affine-data-view-kanban-card .card-body {
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 4px;
  }

  affine-data-view-kanban-card:hover .card-ops {
    visibility: visible;
  }

  .card-ops {
    position: absolute;
    right: 8px;
    top: 8px;
    visibility: hidden;
    display: flex;
    gap: 4px;
    cursor: pointer;
  }

  .card-op {
    display: flex;
    position: relative;
    padding: 4px;
    border-radius: 4px;
    box-shadow: 0px 0px 4px 0px rgba(66, 65, 73, 0.14);
    background-color: var(--affine-background-primary-color);
  }

  .card-op:hover:before {
    content: '';
    border-radius: 4px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: var(--affine-hover-color);
  }

  .card-op svg {
    fill: var(--affine-icon-color);
    color: var(--affine-icon-color);
    width: 16px;
    height: 16px;
  }
`;
let KanbanCard = class KanbanCard extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this.isFocus = false;
        this.clickEdit = (e) => {
            e.stopPropagation();
            const selection = this.getSelection();
            const pageElement = getPageByElement(this);
            if (selection) {
                openDetail(pageElement, this.cardId, selection);
            }
        };
        this.clickMore = (e) => {
            e.stopPropagation();
            const selection = this.getSelection();
            const ele = e.currentTarget;
            if (selection) {
                selection.selection = {
                    selectionType: 'card',
                    cards: [
                        {
                            groupKey: this.groupKey,
                            cardId: this.cardId,
                        },
                    ],
                };
                const pageElement = getPageByElement(this);
                popCardMenu(pageElement, ele, this.cardId, selection);
            }
        };
        this.contextMenu = (e) => {
            e.stopPropagation();
            e.preventDefault();
            const selection = this.getSelection();
            if (selection) {
                selection.selection = {
                    selectionType: 'card',
                    cards: [
                        {
                            groupKey: this.groupKey,
                            cardId: this.cardId,
                        },
                    ],
                };
                const pageElement = getPageByElement(this);
                popCardMenu(pageElement, positionToVRect(e.x, e.y), this.cardId, selection);
            }
        };
    }
    connectedCallback() {
        super.connectedCallback();
        this._disposables.add(this.view.slots.update.on(() => {
            this.requestUpdate();
        }));
        if (this.view.readonly) {
            return;
        }
        this._disposables.addFromEvent(this, 'contextmenu', e => {
            this.contextMenu(e);
        });
        this._disposables.addFromEvent(this, 'click', e => {
            if (e.shiftKey) {
                this.getSelection()?.shiftClickCard(e);
                return;
            }
            const selection = this.getSelection();
            const preSelection = selection?.selection;
            if (preSelection?.selectionType !== 'card')
                return;
            if (selection) {
                selection.selection = undefined;
            }
            const pageElement = getPageByElement(this);
            popSideDetail({
                pageElement,
                view: this.view,
                rowId: this.cardId,
                onClose: () => {
                    if (selection) {
                        selection.selection = preSelection;
                    }
                },
            });
        });
    }
    renderTitle() {
        const title = this.view.getHeaderTitle(this.cardId);
        if (!title) {
            return;
        }
        return html ` <div class="card-header-title">
      <affine-data-view-kanban-cell
        .contentOnly="${true}"
        data-column-id="${title.id}"
        .view="${this.view}"
        .groupKey="${this.groupKey}"
        .column="${title}"
        .cardId="${this.cardId}"
      ></affine-data-view-kanban-cell>
    </div>`;
    }
    renderIcon() {
        const icon = this.view.getHeaderIcon(this.cardId);
        if (!icon) {
            return;
        }
        return html ` <div class="card-header-icon">
      ${icon.getValue(this.cardId)}
    </div>`;
    }
    renderHeader(columns) {
        if (!this.view.hasHeader(this.cardId)) {
            return '';
        }
        const classList = classMap({
            'card-header': true,
            'has-divider': columns.length > 0,
        });
        return html `
      <div class="${classList}">${this.renderTitle()} ${this.renderIcon()}</div>
    `;
    }
    renderBody(columns) {
        if (columns.length === 0) {
            return '';
        }
        return html ` <div class="card-body">
      ${repeat(columns, v => v.id, column => {
            if (this.view.isInHeader(column.id)) {
                return '';
            }
            return html ` <affine-data-view-kanban-cell
            .contentOnly="${false}"
            data-column-id="${column.id}"
            .view="${this.view}"
            .groupKey="${this.groupKey}"
            .column="${column}"
            .cardId="${this.cardId}"
          ></affine-data-view-kanban-cell>`;
        })}
    </div>`;
    }
    render() {
        const columns = this.view.columnManagerList.filter(v => !this.view.isInHeader(v.id));
        this.style.border = this.isFocus
            ? '1px solid var(--affine-primary-color)'
            : '';
        return html `
      ${this.renderHeader(columns)} ${this.renderBody(columns)}
      ${this.renderOps()}
    `;
    }
    renderOps() {
        if (this.view.readonly) {
            return;
        }
        return html `
      <div class="card-ops">
        <div class="card-op" @click="${this.clickEdit}">${NewEditIcon}</div>
        <div class="card-op" @click="${this.clickMore}">
          ${MoreHorizontalIcon}
        </div>
      </div>
    `;
    }
    getSelection() {
        return this.closest('affine-data-view-kanban')?.selectionController;
    }
};
KanbanCard.styles = styles;
__decorate([
    property({ attribute: false })
], KanbanCard.prototype, "view", void 0);
__decorate([
    property({ attribute: false })
], KanbanCard.prototype, "groupKey", void 0);
__decorate([
    property({ attribute: false })
], KanbanCard.prototype, "cardId", void 0);
__decorate([
    state()
], KanbanCard.prototype, "isFocus", void 0);
KanbanCard = __decorate([
    customElement('affine-data-view-kanban-card')
], KanbanCard);
export { KanbanCard };
//# sourceMappingURL=card.js.map