import { h, Host } from "@stencil/core";
import { v4 as uuidv4 } from "uuid";
import debounce from "debounce";
import { minus, plus } from "pn-design-assets/pn-assets/icons.js";
export class PnMultipleInput {
    constructor() {
        this.label = null;
        this.placeholder = null;
        this.addRowButtonText = null;
        this.rowData = [];
    }
    hostElement;
    pnSlotElement = null;
    _formValues = [];
    allFormValues;
    componentWillLoad() {
        const elemtnId = this.generateUniqueId();
        const newRow = { id: elemtnId, input: '' };
        this.rowData = [...this.rowData, newRow];
    }
    componentDidLoad() {
        this.addEventHandlers();
    }
    componentDidUpdate() {
        this.addEventHandlers();
    }
    addEventHandlers() {
        const rows = this.pnSlotElement.querySelectorAll('pn-marketweb-input');
        rows.forEach(element => {
            element.addEventListener('keyup', debounce(this.handleInput.bind(this), 500));
        });
    }
    generateUniqueId() {
        return uuidv4();
    }
    deleteRow(indexToRemove) {
        if (indexToRemove < 0) {
            return;
        }
        this.rowData.splice(indexToRemove, 1);
        this.rowData = [...this.rowData];
        this.emitValues();
    }
    addRow() {
        const newRow = { id: this.generateUniqueId(), input: '' };
        this.rowData = [...this.rowData, newRow];
        this.emitValues();
    }
    handleInput(e) {
        const target = e.target;
        const inputElm = target.closest('pn-marketweb-input');
        if (!inputElm) {
            return;
        }
        const inputElmId = inputElm.id;
        const value = target.value;
        const index = this.rowData.findIndex(item => item.id === inputElmId);
        if (index < 0) {
            return;
        }
        this.rowData[index] = {
            ...this.rowData[index],
            input: value,
        };
        this.emitValues();
    }
    emitValues() {
        this._formValues = [];
        const label = this.label ? this.label : 'InputField';
        this.rowData.forEach(item => {
            const rowValue = { row: [] };
            if (item.input) {
                const dropDownValue = { name: label, value: item.input };
                rowValue.row.push(dropDownValue);
            }
            if (rowValue.row.length === 1) {
                this._formValues.push(rowValue);
            }
        });
        if (this._formValues.length === this.rowData.length) {
            const valueJsonString = JSON.stringify(this._formValues);
            this.allFormValues.emit(valueJsonString);
        }
        else {
            this.allFormValues.emit('');
        }
    }
    render() {
        return (h(Host, { key: 'c19a4c61c107632a3e97217c18ee4c2076ae077e' }, h("div", { key: '71fb803627c006e137db1f6be32fb26ab144c876', ref: el => (this.pnSlotElement = el), class: "multiple-input-slot" }, this.rowData?.map((data, i) => {
            return (h("div", { class: "multiple-input-generated-row" }, h("pn-marketweb-input", { label: this.label, type: "text", placeholder: this.placeholder, value: data.input, id: data.id }), i > 0 ? (h("pn-button", { arialabel: "Delete", icon: minus, appearance: "warning", onClick: () => {
                    this.deleteRow(i);
                }, index: i, id: data.id }, "Delete")) : null));
        })), h("dvi", { key: 'dc7c599822a8e8c39064ecc2ff76cea767ef757f', class: "multiple-input-row" }, h("pn-button", { key: '9289b646075f389d935f8a8be3f2490d0e102005', tooltip: this.addRowButtonText ? this.addRowButtonText : null, "left-icon": "true", arialabel: "Add", icon: plus, appearance: "light", variant: "borderless", class: "connected-dropdown__button-right", onClick: () => {
                this.addRow();
            } }, this.addRowButtonText))));
    }
    static get is() { return "pn-multiple-input"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-multiple-input.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-multiple-input.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "label",
                "reflect": false,
                "defaultValue": "null"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "placeholder",
                "reflect": false,
                "defaultValue": "null"
            },
            "addRowButtonText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "add-row-button-text",
                "reflect": false,
                "defaultValue": "null"
            }
        };
    }
    static get states() {
        return {
            "rowData": {}
        };
    }
    static get events() {
        return [{
                "method": "allFormValues",
                "name": "allFormValues",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=pn-multiple-input.js.map
