const MIN_CELL_WIDTH = 40;
export class ColumnSizer {
    constructor() {
        this.resizeListener = ({ movementX }) => this.onResize(movementX);
        this.resizeEndListener = () => this.onResizeEnd();
    }
    componentDidLoad() {
        this.parentHeader = this.element.parentElement.parentElement;
        this.table = this.element.closest('table');
    }
    onMousedown(e) {
        e.preventDefault();
    }
    onMouseDown(e) {
        e.preventDefault();
        e.stopPropagation();
        this.column = this.findColumn(this.parentHeader);
        this.siblingHeader = this.findSiblingHeader(this.column);
        this.siblingColumn = this.findColumn(this.siblingHeader);
        this.width = this.parentHeader.offsetWidth;
        this.siblingWidth = this.siblingHeader.offsetWidth;
        this.setDisplayHeight(this.table.parentElement);
        this.anjResizeStart.emit();
        this.table.addEventListener('mousemove', this.resizeListener);
        this.table.addEventListener('mouseup', this.resizeEndListener);
    }
    onResizeEnd() {
        this.table.removeEventListener('mousemove', this.resizeListener);
        this.table.removeEventListener('mouseup', this.resizeEndListener);
        return new Promise(resolve => {
            window.setTimeout(() => {
                this.setDisplayHeight();
                this.anjResizeEnd.emit();
                resolve();
            });
        });
    }
    onResize(delta) {
        if (delta === 0) {
            return;
        }
        this.width = this.column.pinned === 'right' ? this.width - delta : this.width + delta;
        this.siblingWidth = this.column.pinned === 'right' ? this.siblingWidth + delta : this.siblingWidth - delta;
        if (this.width < MIN_CELL_WIDTH || this.siblingWidth < MIN_CELL_WIDTH) {
            return;
        }
        this.column.setWidth(`${this.width}px`);
        this.siblingColumn.setWidth(`${this.siblingWidth}px`);
        if (this.siblingColumn.pinned === this.column.pinned) {
            this.siblingColumn.setOffset(`${this.width}px`);
        }
    }
    findColumn(header) {
        return header.querySelector('anj-column-control').column;
    }
    findSiblingHeader(column) {
        return (column.pinned === 'right' ? this.parentHeader.previousSibling : this.parentHeader.nextSibling);
    }
    setDisplayHeight(ref) {
        this.element.style.height = ref ? `${ref.offsetHeight}px` : '100%';
    }
    static get is() { return "anj-column-sizer"; }
    static get originalStyleUrls() { return {
        "$": ["column-sizer.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["column-sizer.css"]
    }; }
    static get events() { return [{
            "method": "anjResizeStart",
            "name": "anjResizeStart",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when resizing starts"
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }, {
            "method": "anjResizeEnd",
            "name": "anjResizeEnd",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when resizing ends"
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }]; }
    static get elementRef() { return "element"; }
    static get listeners() { return [{
            "name": "click",
            "method": "onMousedown",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "mousedown",
            "method": "onMouseDown",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
