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 { css, html } from 'lit';
import { customElement, query, state } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { createIcon } from '../../../../_common/components/icon/uni-icon.js';
import { startDrag } from '../../../utils/drag.js';
import { BaseCellRenderer } from '../base-cell.js';
import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js';
import { progressPureColumnConfig } from './define.js';
const styles = css `
  affine-database-progress-cell-editing {
    display: block;
    width: 100%;
    padding: 0 4px;
  }

  affine-database-progress-cell {
    display: block;
    width: 100%;
    padding: 0 4px;
  }

  .affine-database-progress {
    display: flex;
    align-items: center;
    height: var(--data-view-cell-text-line-height);
    gap: 4px;
  }

  .affine-database-progress-bar {
    position: relative;
    width: 104px;
  }

  .affine-database-progress-bg {
    overflow: hidden;
    width: 100%;
    height: 10px;
    border-radius: 22px;
  }

  .affine-database-progress-fg {
    height: 100%;
  }

  .affine-database-progress-drag-handle {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0px, -1px);
    width: 6px;
    height: 12px;
    border-radius: 2px;
    opacity: 1;
    cursor: ew-resize;
    background: var(--affine-primary-color);
    transition: opacity 0.2s ease-in-out;
  }

  .progress-number {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 18px;
    width: 25px;
    color: var(--affine-text-secondary-color);
    font-size: 14px;
  }
`;
const progressColors = {
    empty: 'var(--affine-black-10)',
    processing: 'var(--affine-processing-color)',
    success: 'var(--affine-success-color)',
};
let ProgressCell = class ProgressCell extends BaseCellRenderer {
    _bgClick(e) {
        if (this.column.readonly) {
            return;
        }
        this.onChange(Math.round((e.offsetX * 100) / e.currentTarget.offsetWidth));
    }
    render() {
        const progress = this.value ?? 0;
        let backgroundColor = progressColors.processing;
        if (progress === 100) {
            backgroundColor = progressColors.success;
        }
        const fgStyles = styleMap({
            width: `${progress}%`,
            backgroundColor,
        });
        const bgStyles = styleMap({
            backgroundColor: progress === 0 ? progressColors.empty : 'var(--affine-hover-color)',
        });
        return html ` <div class="affine-database-progress">
      <div class="affine-database-progress-bar">
        <div
          class="affine-database-progress-bg"
          @click="${this._bgClick}"
          style=${bgStyles}
        >
          <div class="affine-database-progress-fg" style=${fgStyles}></div>
        </div>
      </div>
      <div class="progress-number progress">${progress}</div>
    </div>`;
    }
};
ProgressCell.styles = styles;
ProgressCell = __decorate([
    customElement('affine-database-progress-cell')
], ProgressCell);
export { ProgressCell };
let ProgressCellEditing = class ProgressCellEditing extends BaseCellRenderer {
    constructor() {
        super(...arguments);
        this.startDrag = (event) => {
            const bgRect = this._progressBg.getBoundingClientRect();
            const min = bgRect.left;
            const max = bgRect.right;
            const setValue = (x) => {
                this.tempValue = Math.round(((Math.min(max, Math.max(min, x)) - min) / (max - min)) * 100);
            };
            startDrag(event, {
                onDrag: ({ x }) => {
                    setValue(x);
                    return;
                },
                onMove: ({ x }) => {
                    setValue(x);
                    return;
                },
                onDrop: () => {
                    //
                },
                onClear: () => {
                    //
                },
            });
        };
    }
    onExitEditMode() {
        this.onChange(this._value);
    }
    get _value() {
        return this.tempValue ?? this.value ?? 0;
    }
    _onChange(value) {
        this.tempValue = value;
    }
    firstUpdated() {
        const disposables = this._disposables;
        disposables.addFromEvent(this._progressBg, 'pointerdown', this.startDrag);
        disposables.addFromEvent(window, 'keydown', evt => {
            if (evt.key === 'ArrowDown') {
                this._onChange(Math.max(0, this._value - 1));
                return;
            }
            if (evt.key === 'ArrowUp') {
                this._onChange(Math.min(100, this._value + 1));
                return;
            }
        });
    }
    onCopy(_e) {
        _e.preventDefault();
    }
    onPaste(_e) {
        _e.preventDefault();
    }
    onCut(_e) {
        _e.preventDefault();
    }
    render() {
        const progress = this._value;
        let backgroundColor = progressColors.processing;
        if (progress === 100) {
            backgroundColor = progressColors.success;
        }
        const fgStyles = styleMap({
            width: `${progress}%`,
            backgroundColor,
        });
        const bgStyles = styleMap({
            backgroundColor: progress === 0 ? progressColors.empty : 'var(--affine-hover-color)',
        });
        const handleStyles = styleMap({
            left: `calc(${progress}% - 3px)`,
        });
        return html ` <div class="affine-database-progress">
      <div class="affine-database-progress-bar">
        <div class="affine-database-progress-bg" style=${bgStyles}>
          <div class="affine-database-progress-fg" style=${fgStyles}></div>
          <div
            class="affine-database-progress-drag-handle"
            style=${handleStyles}
          ></div>
        </div>
      </div>
      <div class="progress-number progress">${progress}</div>
    </div>`;
    }
};
ProgressCellEditing.styles = styles;
__decorate([
    state()
], ProgressCellEditing.prototype, "tempValue", void 0);
__decorate([
    query('.affine-database-progress-bg')
], ProgressCellEditing.prototype, "_progressBg", void 0);
ProgressCellEditing = __decorate([
    customElement('affine-database-progress-cell-editing')
], ProgressCellEditing);
export { ProgressCellEditing };
columnRenderer.register({
    type: progressPureColumnConfig.type,
    icon: createIcon('DatabaseProgress'),
    cellRenderer: {
        view: createFromBaseCellRenderer(ProgressCell),
        edit: createFromBaseCellRenderer(ProgressCellEditing),
    },
});
export const progressColumnConfig = progressPureColumnConfig;
//# sourceMappingURL=cell-renderer.js.map