import { h } from "@stencil/core";
import { enterAsClick } from '../../../utils/utils';
import { DragController } from '../../../utils/drag.controller';
import { DropController } from '../../../utils/drop.controller';
export class ColumnControl {
    constructor() {
        this.clickListener = (event) => this.onSort(event);
        this.keyListener = enterAsClick(this.onSort.bind(this));
        this.dropListener = (e) => this.onDrop(e);
        this.resizing = false;
    }
    async componentWillLoad() {
        this.table = this.column.table;
        this.parentEl = this.element.parentElement;
        this.parentEl.addEventListener('click', this.clickListener);
        this.parentEl.addEventListener('keyup', this.keyListener);
        this.parentEl.addEventListener('anjDrop', this.dropListener);
        if (this.table.orderable && this.column.orderable) {
            this.dragController = new DragController(this.parentEl, { currentIndex: this.columnIndex() });
            this.dropController = new DropController(this.parentEl);
            this.dragController.connect();
            this.dropController.connect();
        }
    }
    componentDidUnload() {
        if (this.dragController) {
            this.dragController.disconnect();
        }
        if (this.dragController) {
            this.dropController.disconnect();
        }
        this.parentEl.removeEventListener('click', this.clickListener);
        this.parentEl.removeEventListener('keyup', this.keyListener);
        this.parentEl.removeEventListener('anjDrop', this.dropListener);
    }
    onSort(event) {
        if (!this.field || this.resizing || !this.column.sortable || fromFilter(event)) {
            return;
        }
        this.anjSort.emit({ field: this.field, order: this.sortIndex > -1 && this.sortOrder === 'asc' ? 'desc' : 'asc' });
    }
    async onContextSelection({ detail }) {
        this.anjPin.emit({ index: this.columnIndex(), pin: detail });
    }
    onResizeStart() {
        this.resizing = true;
    }
    onResizeEnd() {
        this.resizing = false;
    }
    onDrop({ detail }) {
        detail['targetIndex'] = this.columnIndex();
        this.anjReorder.emit(detail);
    }
    columnIndex() {
        return parseInt(this.parentEl.dataset.columnIndex, 10);
    }
    render() {
        return [
            this.column.field && this.column.sortable ?
                h("svg", { class: "anj-sort-icon", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24" }, this.sortOrder === 'asc' ? [
                    h("path", { fill: "none", d: "M0 0h24v24H0V0z" }),
                    h("path", { fill: "currentColor", d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" })
                ] : [
                    h("path", { fill: "none", d: "M0 0h24v24H0V0z" }),
                    h("path", { fill: "currentColor", d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" })
                ]) : undefined,
            this.table.sizable && this.column.sizable ? h("anj-column-sizer", null) : undefined,
            h("anj-context-menu", { attach: this.parentEl, loader: () => this.column.contextMenu() })
        ];
    }
    static get is() { return "anj-column-control"; }
    static get originalStyleUrls() { return {
        "$": ["column-control.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["column-control.css"]
    }; }
    static get properties() { return {
        "column": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "ColumnDefinition",
                "resolved": "ColumnDefinition",
                "references": {
                    "ColumnDefinition": {
                        "location": "import",
                        "path": "../table.types"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The column"
            }
        },
        "field": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string | undefined",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The field for the column"
            },
            "attribute": "field",
            "reflect": false
        },
        "pinned": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "PinnedType",
                "resolved": "\"left\" | \"right\"",
                "references": {
                    "PinnedType": {
                        "location": "import",
                        "path": "../table.types"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The pinned state of the column"
            },
            "attribute": "pinned",
            "reflect": false
        },
        "sortIndex": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Is the column sorted\nPossible values are: `\"asc\"`, `\"desc\"`, `undefined`."
            },
            "attribute": "sort-index",
            "reflect": false
        },
        "sortOrder": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "SortType",
                "resolved": "\"asc\" | \"desc\"",
                "references": {
                    "SortType": {
                        "location": "import",
                        "path": "../../../utils/data-source/data-source.types"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Is the column sorted\nPossible values are: `\"asc\"`, `\"desc\"`, `undefined`."
            },
            "attribute": "sort-order",
            "reflect": false
        }
    }; }
    static get events() { return [{
            "method": "anjReorder",
            "name": "anjReorder",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the column has been changed"
            },
            "complexType": {
                "original": "ReorderData",
                "resolved": "ReorderData",
                "references": {
                    "ReorderData": {
                        "location": "import",
                        "path": "../table.types"
                    }
                }
            }
        }, {
            "method": "anjPin",
            "name": "anjPin",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the column has been changed"
            },
            "complexType": {
                "original": "PinChange",
                "resolved": "PinChange",
                "references": {
                    "PinChange": {
                        "location": "import",
                        "path": "../table.types"
                    }
                }
            }
        }, {
            "method": "anjSort",
            "name": "anjSort",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the column has been changed"
            },
            "complexType": {
                "original": "SortData",
                "resolved": "SortData",
                "references": {
                    "SortData": {
                        "location": "import",
                        "path": "../table.types"
                    }
                }
            }
        }]; }
    static get elementRef() { return "element"; }
    static get listeners() { return [{
            "name": "anjContextSelect",
            "method": "onContextSelection",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjResizeStart",
            "method": "onResizeStart",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjResizeEnd",
            "method": "onResizeEnd",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
const fromFilter = (event) => {
    if (!event)
        return false;
    return !!event.composedPath().find((e) => e.matches && e.matches('anj-column-filter-toggle'));
};
