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 './components/link-node.js';
import { baseTheme } from '@toeverything/theme';
import { css, unsafeCSS } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { html } from 'lit/static-html.js';
import { createIcon } from '../../../../_common/components/icon/uni-icon.js';
import { PenIcon } from '../../../../_common/icons/index.js';
import { stopPropagation } from '../../../../_common/utils/event.js';
import { isValidUrl, normalizeUrl } from '../../../../_common/utils/url.js';
import { BaseCellRenderer } from '../base-cell.js';
import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js';
import { linkPureColumnConfig } from './define.js';
let LinkCell = class LinkCell extends BaseCellRenderer {
    constructor() {
        super(...arguments);
        this._onClick = (event) => {
            event.stopPropagation();
            const value = this.value ?? '';
            if (!value || !isValidUrl(value)) {
                this.selectCurrentCell(true);
                return;
            }
            if (isValidUrl(value)) {
                const target = event.target;
                const link = target.querySelector('.link-node');
                if (link) {
                    event.preventDefault();
                    link.click();
                }
                return;
            }
        };
        this._onEdit = (e) => {
            e.stopPropagation();
            this.selectCurrentCell(true);
        };
    }
    render() {
        const linkText = this.value ?? '';
        return html `
      <div class="affine-database-link" @click="${this._onClick}">
        <affine-database-link-node
          .link="${linkText}"
        ></affine-database-link-node>
        <div class="affine-database-link-icon" @click="${this._onEdit}">
          ${PenIcon}
        </div>
      </div>
    `;
    }
};
LinkCell.styles = css `
    affine-database-link-cell {
      width: 100%;
      user-select: none;
      cursor: pointer;
    }

    affine-database-link-cell:hover .affine-database-link-icon {
      visibility: visible;
    }

    .affine-database-link {
      display: flex;
      position: relative;
      align-items: center;
      width: 100%;
      height: 100%;
      outline: none;
      overflow: hidden;
      font-size: var(--data-view-cell-text-size);
      line-height: var(--data-view-cell-text-line-height);
      word-break: break-all;
    }

    affine-database-link-node {
      flex: 1;
      word-break: break-all;
    }

    .affine-database-link-icon {
      position: absolute;
      right: 0;
      display: flex;
      align-items: center;
      visibility: hidden;
      cursor: pointer;
      background: var(--affine-background-primary-color);
      border-radius: 4px;
    }
    .affine-database-link-icon:hover {
      background: var(--affine-hover-color);
    }

    .affine-database-link-icon svg {
      width: 16px;
      height: 16px;
      fill: var(--affine-icon-color);
    }
  `;
LinkCell = __decorate([
    customElement('affine-database-link-cell')
], LinkCell);
export { LinkCell };
let LinkCellEditing = class LinkCellEditing extends BaseCellRenderer {
    constructor() {
        super(...arguments);
        this._focusEnd = () => {
            const end = this._container.value.length;
            this._container.focus();
            this._container.setSelectionRange(end, end);
        };
        this._setValue = (value = this._container.value) => {
            let url = value;
            if (isValidUrl(value)) {
                url = normalizeUrl(value);
            }
            this.onChange(url);
            this._container.value = url;
        };
        this._onKeydown = (e) => {
            if (e.key === 'Enter' && !e.isComposing) {
                this._setValue();
                setTimeout(() => {
                    this.selectCurrentCell(false);
                });
            }
        };
    }
    firstUpdated() {
        this._focusEnd();
    }
    onExitEditMode() {
        this._setValue();
    }
    render() {
        const linkText = this.value ?? '';
        return html `<input
      class="affine-database-link-editing link"
      .value=${linkText}
      @keydown=${this._onKeydown}
      @pointerdown=${stopPropagation}
    />`;
    }
};
LinkCellEditing.styles = css `
    affine-database-link-cell-editing {
      width: 100%;
      cursor: text;
    }

    .affine-database-link-editing {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 0;
      border: none;
      font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
      color: var(--affine-text-primary-color);
      font-weight: 400;
      background-color: transparent;
      font-size: var(--data-view-cell-text-size);
      line-height: var(--data-view-cell-text-line-height);
      word-break: break-all;
    }

    .affine-database-link-editing:focus {
      outline: none;
    }
  `;
__decorate([
    query('.affine-database-link-editing')
], LinkCellEditing.prototype, "_container", void 0);
LinkCellEditing = __decorate([
    customElement('affine-database-link-cell-editing')
], LinkCellEditing);
export { LinkCellEditing };
columnRenderer.register({
    type: linkPureColumnConfig.type,
    icon: createIcon('LinkIcon'),
    cellRenderer: {
        view: createFromBaseCellRenderer(LinkCell),
        edit: createFromBaseCellRenderer(LinkCellEditing),
    },
});
export const linkColumnConfig = linkPureColumnConfig;
//# sourceMappingURL=cell-renderer.js.map