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 { flip, offset } from '@floating-ui/dom';
import { baseTheme } from '@toeverything/theme';
import { format } from 'date-fns/format';
import { css, html, unsafeCSS } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { DatePicker } from '../../../../_common/components/date-picker/date-picker.js';
import { createIcon } from '../../../../_common/components/icon/uni-icon.js';
import { createLitPortal } from '../../../../_common/components/portal.js';
import { BaseCellRenderer } from '../base-cell.js';
import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js';
import { datePureColumnConfig } from './define.js';
let DateCell = class DateCell extends BaseCellRenderer {
    render() {
        const value = this.value ? format(new Date(this.value), 'yyyy-MM-dd') : '';
        if (!value) {
            return '';
        }
        return html ` <input
      type="date"
      value="${value}"
      class="affine-database-date date"
    />`;
    }
};
DateCell.styles = css `
    affine-database-date-cell {
      width: 100%;
    }

    .affine-database-date {
      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);
      height: var(--data-view-cell-text-line-height);
    }

    input.affine-database-date[type='date']::-webkit-calendar-picker-indicator {
      display: none;
    }
  `;
DateCell = __decorate([
    customElement('affine-database-date-cell')
], DateCell);
export { DateCell };
let DateCellEditing = class DateCellEditing extends BaseCellRenderer {
    constructor() {
        super(...arguments);
        this._prevPortalAbortController = null;
        this._datePicker = null;
        this._setValue = (str = this._inputEle.value) => {
            if (str === '') {
                this.onChange(undefined);
                this._inputEle.value = '';
                return;
            }
            const date = new Date(str);
            const value = format(date, 'yyyy-MM-dd');
            this.onChange(date.getTime());
            this._inputEle.value = `${value ?? ''}`;
        };
        this._onFocus = () => {
            if (this._prevPortalAbortController &&
                !this._prevPortalAbortController.signal.aborted)
                return;
            // this._inputEle.showPicker();
            this._prevPortalAbortController?.abort();
            const abortController = new AbortController();
            this._prevPortalAbortController = abortController;
            abortController.signal.addEventListener('abort', () => (this._datePicker = null), { once: true });
            const root = createLitPortal({
                abortController,
                closeOnClickAway: true,
                computePosition: {
                    referenceElement: this._inputEle,
                    placement: 'bottom',
                    middleware: [offset(10), flip()],
                },
                template: () => {
                    const datePicker = new DatePicker();
                    datePicker.value = this.value ?? Date.now();
                    datePicker.onChange = (date) => {
                        this._setValue(date.toISOString());
                    };
                    setTimeout(() => datePicker.focusDateCell());
                    this._datePicker = datePicker;
                    return datePicker;
                },
            });
            // TODO: use z-index from variable,
            //       for now the slide-layout-modal's z-index is `1001`
            //       the z-index of popover should be higher than it
            // root.style.zIndex = 'var(--affine-z-index-popover)';
            root.style.zIndex = '1002';
        };
    }
    onExitEditMode() {
        this._setValue();
    }
    firstUpdated() {
        this._inputEle.focus();
    }
    _onInput(e) {
        if (!this._datePicker)
            return;
        const v = e.target.value;
        this._datePicker.value = v ? new Date(v).getTime() : undefined;
    }
    render() {
        const value = this.value ? format(this.value, 'yyyy-MM-dd') : '';
        return html `<input
      type="date"
      class="affine-database-date date"
      .value="${value}"
      @focus=${this._onFocus}
      @input=${this._onInput}
    />`;
    }
};
DateCellEditing.styles = css `
    affine-database-date-cell-editing {
      width: 100%;
      cursor: text;
    }

    .affine-database-date:focus {
      outline: none;
    }
  `;
__decorate([
    query('input')
], DateCellEditing.prototype, "_inputEle", void 0);
DateCellEditing = __decorate([
    customElement('affine-database-date-cell-editing')
], DateCellEditing);
export { DateCellEditing };
columnRenderer.register({
    type: datePureColumnConfig.type,
    icon: createIcon('DateTime'),
    cellRenderer: {
        view: createFromBaseCellRenderer(DateCell),
        edit: createFromBaseCellRenderer(DateCellEditing),
    },
});
export const dateColumnConfig = datePureColumnConfig;
//# sourceMappingURL=cell-renderer.js.map