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 { baseTheme } from '@toeverything/theme';
import { css, html, unsafeCSS } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { createIcon } from '../../../../_common/components/icon/uni-icon.js';
import { stopPropagation } from '../../../../_common/utils/event.js';
import { BaseCellRenderer } from '../base-cell.js';
import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js';
import { numberPureColumnConfig } from './define.js';
let NumberCell = class NumberCell extends BaseCellRenderer {
    render() {
        return html ` <div class="affine-database-number number">
      ${this.value ?? ''}
    </div>`;
    }
};
NumberCell.styles = css `
    affine-database-number-cell {
      display: block;
      width: 100%;
    }

    .affine-database-number {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 0;
      border: none;
      font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
      font-size: var(--data-view-cell-text-size);
      line-height: var(--data-view-cell-text-line-height);
      color: var(--affine-text-primary-color);
      font-weight: 400;
      background-color: transparent;
    }
  `;
NumberCell = __decorate([
    customElement('affine-database-number-cell')
], NumberCell);
export { NumberCell };
let NumberCellEditing = class NumberCellEditing extends BaseCellRenderer {
    constructor() {
        super(...arguments);
        this.focusEnd = () => {
            const end = this._inputEle.value.length;
            this._inputEle.focus();
            this._inputEle.setSelectionRange(end, end);
        };
        this._setValue = (str = this._inputEle.value) => {
            if (!str) {
                this.onChange(undefined);
                return;
            }
            const value = Number.parseFloat(str);
            if (Object.is(value, NaN)) {
                this._inputEle.value = `${this.value ?? ''}`;
                return;
            }
            this._inputEle.value = `${this.value ?? ''}`;
            this.onChange(value);
        };
        this._keydown = (e) => {
            if (e.key === 'Enter' && !e.isComposing) {
                requestAnimationFrame(() => {
                    this.selectCurrentCell(false);
                });
            }
        };
    }
    onExitEditMode() {
        this._setValue();
    }
    firstUpdated() {
        requestAnimationFrame(() => {
            this.focusEnd();
        });
    }
    _blur() {
        this.selectCurrentCell(false);
    }
    _focus() {
        if (!this.isEditing) {
            this.selectCurrentCell(true);
        }
    }
    render() {
        const value = `${this.value ?? ''}`;
        return html `<input
      .value="${value}"
      @keydown="${this._keydown}"
      @blur="${this._blur}"
      @focus="${this._focus}"
      class="affine-database-number number"
      @pointerdown="${stopPropagation}"
    />`;
    }
};
NumberCellEditing.styles = css `
    affine-database-number-cell-editing {
      display: block;
      width: 100%;
      cursor: text;
    }

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

    .affine-database-number:focus {
      outline: none;
    }
  `;
__decorate([
    query('input')
], NumberCellEditing.prototype, "_inputEle", void 0);
NumberCellEditing = __decorate([
    customElement('affine-database-number-cell-editing')
], NumberCellEditing);
export { NumberCellEditing };
columnRenderer.register({
    type: numberPureColumnConfig.type,
    icon: createIcon('DatabaseNumber'),
    cellRenderer: {
        view: createFromBaseCellRenderer(NumberCell),
        edit: createFromBaseCellRenderer(NumberCellEditing),
    },
});
export const numberColumnConfig = numberPureColumnConfig;
//# sourceMappingURL=cell-renderer.js.map