import { Host, h } from "@stencil/core";
import { DragController } from '../../../../utils/drag.controller';
import { DropController } from '../../../../utils/drop.controller';
import Tunnel from '../../../locale/i18n.provider';
var Translations;
(function (Translations) {
    Translations["DRAG_INSTRUCTION"] = "Draggable item. Press up or down to move.";
})(Translations || (Translations = {}));
export class ColumnMenuItem {
    constructor() {
        this.handleFocused = false;
    }
    onVisibleChange() {
        this.visible ? this.dropController.connect() : this.dropController.disconnect();
    }
    connectedCallback() {
        this.dragController = new DragController(this.element, this.getDropData.bind(this));
        this.dropController = new DropController(this.element);
        if (this.visible) {
            this.dropController.connect();
        }
    }
    disconnectedCallback() {
        this.dropController.disconnect();
    }
    onToggle(event) {
        if (event.detail.checked === this.visible || event.detail.value !== this.name) {
            event.stopPropagation();
        }
    }
    onEnter(ev) {
        if (this.handleFocused && (ev.key === 'ArrowDown' || ev.key === 'ArrowUp')) {
            const detail = this.getDropData();
            detail['targetIndex'] = (ev.key === 'ArrowDown') ? detail.currentIndex + 1 : detail.currentIndex - 1;
            if (detail['targetIndex'] < 0) {
                return;
            }
            this.anjDrop.emit(detail);
        }
    }
    onFocus() {
        this.handleFocused = true;
    }
    onBlur() {
        this.handleFocused = false;
    }
    getDropData() {
        return {
            currentIndex: this.index
        };
    }
    render() {
        return (h(Host, { draggable: this.handleFocused, class: { 'anj-handle-focused': this.handleFocused }, onMouseEnter: () => this.onFocus(), onMouseLeave: () => this.onBlur() },
            this.visible && !this.disabled
                ? h("anj-button", { "aria-label": this.translator(Translations.DRAG_INSTRUCTION), context: "free", onMouseDown: () => this.dragController.connect(), onMouseUp: () => this.dragController.disconnect() },
                    h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
                        h("path", { d: "M20 9H4v2h16V9zM4 15h16v-2H4v2z" })))
                : undefined,
            h("anj-checkbox", { checked: this.visible, value: this.name },
                h("slot", null))));
    }
    static get is() { return "anj-column-menu-item"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["column-menu-item.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["column-menu-item.css"]
    }; }
    static get properties() { return {
        "index": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The column index"
            },
            "attribute": "index",
            "reflect": false
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Are the controls disabled.\nOnly comes up if it is the last visible column."
            },
            "attribute": "disabled",
            "reflect": false
        },
        "name": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The name of the column"
            },
            "attribute": "name",
            "reflect": false
        },
        "visible": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Is the column visible (not the element)"
            },
            "attribute": "visible",
            "reflect": false
        },
        "translator": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "IntlFormatFn",
                "resolved": "(value: any, variables?: any) => string",
                "references": {
                    "IntlFormatFn": {
                        "location": "import",
                        "path": "../../../locale/i18n.provider"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [{
                        "text": undefined,
                        "name": "internal"
                    }],
                "text": ""
            }
        }
    }; }
    static get states() { return {
        "handleFocused": {}
    }; }
    static get events() { return [{
            "method": "anjDrop",
            "name": "anjDrop",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when a11y drag/drop is used"
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get elementRef() { return "element"; }
    static get watchers() { return [{
            "propName": "visible",
            "methodName": "onVisibleChange"
        }]; }
    static get listeners() { return [{
            "name": "anjChange",
            "method": "onToggle",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "keydown",
            "method": "onEnter",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjFocus",
            "method": "onFocus",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjBlur",
            "method": "onBlur",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
Tunnel.injectProps(ColumnMenuItem, ['translator']);
