import { Host, h } from "@stencil/core";
import { DragController } from '../../../utils/drag.controller';
import { DropController } from '../../../utils/drop.controller';
import Tunnel from '../../locale/i18n.provider';
import { ListTranslations } from '../constants';
var ListItemTranslations;
(function (ListItemTranslations) {
    ListItemTranslations["DRAG_INSTRUCTION"] = "Draggable item. Press up or down to move.";
})(ListItemTranslations || (ListItemTranslations = {}));
export class ListItem {
    constructor() {
        this.handleFocused = false;
        this.hideLabels = false;
    }
    onBlur() {
        this.handleFocused = false;
    }
    onChange(event) {
        event.stopPropagation();
        this.anjListItemChange.emit({
            value: event.detail.innerValue || event.detail.value,
            index: this.index
        });
    }
    onFocus() {
        this.handleFocused = true;
    }
    connectedCallback() {
        this.dragController = new DragController(this.element, this.getDropData.bind(this));
        this.dropController = new DropController(this.element);
        this.dropController.connect();
    }
    disconnectedCallback() {
        this.dropController.disconnect();
    }
    addRow() {
        this.anjRowAdd.emit(this.index);
    }
    getDropData() {
        return {
            currentIndex: this.index
        };
    }
    handleHover({ target }, action) {
        this.anjHover.emit({ target, action });
    }
    handleHoverEnd() {
        this.anjHoverEnd.emit();
    }
    onKeydown(ev) {
        if (this.handleFocused && (ev.key === 'ArrowDown' || ev.key === 'ArrowUp')) {
            ev.preventDefault();
            const detail = this.getDropData();
            detail['targetIndex'] = (ev.key === 'ArrowDown') ? detail.currentIndex + 1 : detail.currentIndex - 1;
            if (detail['targetIndex'] < 0) {
                return;
            }
            this.anjDrop.emit(detail);
        }
    }
    removeRow() {
        this.anjRowRemove.emit(this.index);
    }
    renderInput() {
        switch (this.type) {
            case 'select':
                return (h("anj-select", { value: this.value }, this.options.map((option) => (h("anj-option", { value: option }, option)))));
            case 'number':
                return (h("anj-input", { value: this.value, type: "number" },
                    h("anj-number-stepper", null)));
            case 'text':
            default:
                return (h("anj-input", { value: this.value }));
        }
    }
    render() {
        return (h(Host, { draggable: this.handleFocused, class: { 'anj-handle-focused': this.handleFocused }, onMouseEnter: () => this.onFocus(), onMouseLeave: () => this.onBlur() },
            h("anj-form-group", null, this.renderInput()),
            h("anj-button", { context: "icon", "aria-label": "Add", disabled: !this.canAdd, onClick: () => this.addRow(), onMouseEnter: (event) => this.handleHover(event, ListTranslations.ADD), onMouseLeave: () => this.handleHoverEnd() },
                h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
                    h("path", { fill: "none", d: "M0 0h24v24H0V0z" }),
                    h("path", { d: "M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }))),
            h("anj-button", { context: "icon", "aria-label": "Remove", disabled: !this.canRemove, onClick: () => this.removeRow(), onMouseEnter: (event) => this.handleHover(event, ListTranslations.REMOVE), onMouseLeave: () => this.handleHoverEnd() },
                h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
                    h("path", { fill: "none", d: "M0 0h24v24H0V0z" }),
                    h("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4h-3.5z" }))),
            h("anj-button", { "aria-label": this.translator(ListItemTranslations.DRAG_INSTRUCTION), context: "free", onMouseDown: () => this.dragController.connect(), onMouseUp: () => this.dragController.disconnect(), onKeyDown: (e) => this.onKeydown(e) },
                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" })))));
    }
    static get is() { return "anj-list-item"; }
    static get originalStyleUrls() { return {
        "$": ["list-item.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["list-item.css"]
    }; }
    static get properties() { return {
        "canAdd": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "can-add",
            "reflect": false
        },
        "canRemove": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "can-remove",
            "reflect": false
        },
        "index": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "index",
            "reflect": false
        },
        "options": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "any[]",
                "resolved": "any[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "type": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'text' | 'number' | 'select'",
                "resolved": "\"number\" | \"select\" | \"text\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "type",
            "reflect": false
        },
        "value": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "string | number",
                "resolved": "number | string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "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": {},
        "hideLabels": {}
    }; }
    static get events() { return [{
            "method": "anjDrop",
            "name": "anjDrop",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "anjHover",
            "name": "anjHover",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "anjHoverEnd",
            "name": "anjHoverEnd",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }, {
            "method": "anjRowAdd",
            "name": "anjRowAdd",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            }
        }, {
            "method": "anjRowRemove",
            "name": "anjRowRemove",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            }
        }, {
            "method": "anjListItemChange",
            "name": "anjListItemChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get elementRef() { return "element"; }
    static get listeners() { return [{
            "name": "anjBlur",
            "method": "onBlur",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjChange",
            "method": "onChange",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjFocus",
            "method": "onFocus",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
Tunnel.injectProps(ListItem, ['translator']);
