import { h, Host } from "@stencil/core";
import { v4 as uuidv4 } from "uuid";
import { plus } from "pn-design-assets/pn-assets/icons.js";
export class PnMultiRowConnectedDropdown {
    constructor() {
        this.dropdownData = null;
        this.languageCode = null;
        this.label = null;
        this.firstDropdownLabel = null;
        this.secondDropdownLabel = null;
        this.dropdownPlaceholder = null;
        this.addRowText = null;
        this.inputFieldLabel = null;
        this.inputFieldPlaceholder = null;
        this.disabledDates = null;
        this.dateButtonText = null;
        this.datePlaceholder = null;
        this.dateDaysFromToday = null;
        this.allowMultipleRows = false;
        this.allowMultipleDates = false;
        this.startDateLabel = null;
        this.endDateLabel = null;
        this.multiDateHelperText = null;
        this.generateDatesButtonText = null;
        this.saveDateButtonText = null;
        this.noDatesText = null;
        this.yearsToAddToEndDate = null;
        this.minAmount = 1;
        this.errorMessageEmpty = undefined;
        this.errorMessageMinAmount = undefined;
        this.minWarningAmount = null;
        this.warningMessageMinAmount = undefined;
        this.rowCount = null;
        this.rowData = null;
        this.formValues = null;
    }
    hostElement;
    _buttonValueName = null;
    _firstDropdownValueName = null;
    _secondDropdownValueName = null;
    _inputValueName = null;
    _dateValueName = null;
    allFormValues;
    _defaultRow = {
        id: this.generateUniqueId(),
        buttons: [],
        firstDropdown: [],
        secondDropdown: [],
        input: '',
        dates: '',
        dateRange: {
            days: [],
            startDate: '',
            endDate: '',
        },
    };
    componentWillLoad() {
        this.setDaysArr();
        this.formValues = [];
        this.rowData = [this._defaultRow];
        this.rowCount = this.rowData.length;
        this._buttonValueName = this.label?.length ? this.label : 'value0';
        this._firstDropdownValueName = this.firstDropdownLabel?.length ? this.firstDropdownLabel : 'value1';
        this._secondDropdownValueName = this.secondDropdownLabel?.length ? this.secondDropdownLabel : 'value2';
        this._inputValueName = this.inputFieldLabel?.length ? this.inputFieldLabel : 'value3';
        this._dateValueName = this.dateButtonText?.length ? this.dateButtonText : 'value4';
    }
    componentDidLoad() { }
    emitValuesIfValid() {
        this.formValues = [];
        this.rowData.forEach(item => {
            const rowValue = { row: [] };
            const buttonSelection = item.buttons.find(x => x.selected === true);
            if (buttonSelection) {
                const buttonValue = { name: this._buttonValueName, value: buttonSelection.label };
                rowValue.row.push(buttonValue);
            }
            const firstDropdownSelection = item.firstDropdown.find(x => x.selected === true);
            if (firstDropdownSelection) {
                const firstDropdownValue = { name: this._firstDropdownValueName, value: firstDropdownSelection.label };
                rowValue.row.push(firstDropdownValue);
            }
            const secondDropdownSelection = item.secondDropdown.find(x => x.selected === true);
            if (secondDropdownSelection) {
                const secondDropdownValue = { name: this._secondDropdownValueName, value: secondDropdownSelection.label };
                rowValue.row.push(secondDropdownValue);
            }
            const input = item.input;
            if (input?.length) {
                const inputValue = { name: this._inputValueName, value: input };
                rowValue.row.push(inputValue);
            }
            const dates = item.dates;
            if (dates?.length) {
                const datestValue = { name: this._dateValueName, value: dates };
                rowValue.row.push(datestValue);
            }
            if (rowValue.row.length === 5) {
                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('');
        }
    }
    predefinedValueChange(e) {
        const indexToUpdate = this.rowData.findIndex(data => data.id === e.detail.id);
        const val = e.detail;
        this.rowData[indexToUpdate] = {
            ...this.rowData[indexToUpdate],
            buttons: val.buttons,
            firstDropdown: val.firstDropdown,
            secondDropdown: val.secondDropdown,
            input: val.input,
            dates: val.dates,
            dateRange: val.dateRange,
        };
        this.emitValuesIfValid();
    }
    deleteRowEvent(e) {
        const indexToRemove = this.rowData.findIndex(data => data.id === e.detail);
        this.rowData.splice(indexToRemove, 1);
        this.rowData = [...this.rowData];
        this.rowCount = this.rowData.length;
        this.emitValuesIfValid();
    }
    generateUniqueId() {
        return uuidv4();
    }
    addRow() {
        const newRow = this._defaultRow;
        newRow.id = this.generateUniqueId();
        this.rowData = [...this.rowData, newRow];
        this.rowCount = this.rowData.length;
    }
    setDaysArr() {
        const language = this.languageCode.toLowerCase();
        switch (language) {
            case 'en':
                this._defaultRow.dateRange.days = [
                    { label: 'Monday', value: '1', selected: false },
                    { label: 'Tuesday', value: '2', selected: false },
                    { label: 'Wednesday', value: '3', selected: false },
                    { label: 'Thursday', value: '4', selected: false },
                    { label: 'Friday', value: '5', selected: false },
                ];
                break;
            case 'sv':
                this._defaultRow.dateRange.days = [
                    { label: 'Måndag', value: '1', selected: false },
                    { label: 'Tisdag', value: '2', selected: false },
                    { label: 'Onsdag', value: '3', selected: false },
                    { label: 'Torsdag', value: '4', selected: false },
                    { label: 'Fredag', value: '5', selected: false },
                ];
                break;
            case 'da':
                this._defaultRow.dateRange.days = [
                    { label: 'Mandag', value: '1', selected: false },
                    { label: 'Tirsdag', value: '2', selected: false },
                    { label: 'Onsdag', value: '3', selected: false },
                    { label: 'Torsdag', value: '4', selected: false },
                    { label: 'Fredag', value: '5', selected: false },
                ];
                break;
            case 'fi':
                this._defaultRow.dateRange.days = [
                    { label: 'Maanantai', value: '1', selected: false },
                    { label: 'Tiistai', value: '2', selected: false },
                    { label: 'Keskiviikko', value: '3', selected: false },
                    { label: 'Torstai', value: '4', selected: false },
                    { label: 'Perjantai', value: '5', selected: false },
                ];
                break;
            case 'no':
                this._defaultRow.dateRange.days = [
                    { label: 'Mandag', value: '1', selected: false },
                    { label: 'Tirsdag', value: '2', selected: false },
                    { label: 'Onsdag', value: '3', selected: false },
                    { label: 'Torsdag', value: '4', selected: false },
                    { label: 'Fredag', value: '5', selected: false },
                ];
                break;
            default:
                this._defaultRow.dateRange.days = [
                    { label: 'Monday', value: '1', selected: false },
                    { label: 'Tuesday', value: '2', selected: false },
                    { label: 'Wednesday', value: '3', selected: false },
                    { label: 'Thursday', value: '4', selected: false },
                    { label: 'Friday', value: '5', selected: false },
                ];
                break;
        }
    }
    render() {
        return (h(Host, { key: '26e104f923a285295e8a5d8a15d845b3e9c559d6' }, this.rowData?.map((data, i) => {
            return (h("div", { class: 'generated-row-' + i, id: 'generated-row-connected-dropdown-' + i }, h("pn-multi-row-connected-dropdown-row", { "dropdown-data": this.dropdownData, "language-code": this.languageCode, label: this.label, "first-dropdown-label": this.firstDropdownLabel, "second-dropdown-label": this.secondDropdownLabel, "dropdown-placeholder": this.dropdownPlaceholder, "add-row-text": this.addRowText, "input-field-label": this.inputFieldLabel, "input-field-placeholder": this.inputFieldPlaceholder, "disabled-dates": this.disabledDates, "date-button-text": this.dateButtonText, "date-placeholder": this.datePlaceholder, "date-days-from-today": this.dateDaysFromToday, "allow-multiple-dates": this.allowMultipleDates, "start-date-label": this.startDateLabel, "end-date-label": this.endDateLabel, "multi-date-helper-text": this.multiDateHelperText, "generate-dates-button-text": this.generateDatesButtonText, "save-date-button-text": this.saveDateButtonText, "no-dates-text": this.noDatesText, index: i, "predefined-value": JSON.stringify(data), "years-to-add-to-end-date": this.yearsToAddToEndDate, "min-amount": this.minAmount, "error-message-empty": this.errorMessageEmpty, "error-message-min-amount": this.errorMessageMinAmount, "min-warning-amount": this.minWarningAmount, "warning-message-min-amount": this.warningMessageMinAmount })));
        }), this.allowMultipleRows ? (h("div", { class: "connected-dropdown__row" }, h("pn-button", { tooltip: this.addRowText ? this.addRowText : null, "left-icon": "true", arialabel: "Add", icon: plus, appearance: "light", variant: "borderless", class: "connected-dropdown__button-right", onClick: () => {
                this.addRow();
            } }, this.addRowText))) : null));
    }
    static get is() { return "pn-multi-row-connected-dropdown"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-multi-row-connected-dropdown.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-multi-row-connected-dropdown.css"]
        };
    }
    static get properties() {
        return {
            "dropdownData": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | Root[]",
                    "resolved": "Root[] | string",
                    "references": {
                        "Root": {
                            "location": "import",
                            "path": "./types",
                            "id": "src/components/input/pn-multi-row-connected-dropdown/types.ts::Root"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "dropdown-data",
                "reflect": false,
                "defaultValue": "null"
            },
            "languageCode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "language-code",
                "reflect": false,
                "defaultValue": "null"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "label",
                "reflect": false,
                "defaultValue": "null"
            },
            "firstDropdownLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "first-dropdown-label",
                "reflect": false,
                "defaultValue": "null"
            },
            "secondDropdownLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "second-dropdown-label",
                "reflect": false,
                "defaultValue": "null"
            },
            "dropdownPlaceholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "dropdown-placeholder",
                "reflect": false,
                "defaultValue": "null"
            },
            "addRowText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "add-row-text",
                "reflect": false,
                "defaultValue": "null"
            },
            "inputFieldLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "input-field-label",
                "reflect": false,
                "defaultValue": "null"
            },
            "inputFieldPlaceholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "input-field-placeholder",
                "reflect": false,
                "defaultValue": "null"
            },
            "disabledDates": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "disabled-dates",
                "reflect": false,
                "defaultValue": "null"
            },
            "dateButtonText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "date-button-text",
                "reflect": false,
                "defaultValue": "null"
            },
            "datePlaceholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "date-placeholder",
                "reflect": false,
                "defaultValue": "null"
            },
            "dateDaysFromToday": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "date-days-from-today",
                "reflect": false,
                "defaultValue": "null"
            },
            "allowMultipleRows": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "allow-multiple-rows",
                "reflect": false,
                "defaultValue": "false"
            },
            "allowMultipleDates": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "allow-multiple-dates",
                "reflect": false,
                "defaultValue": "false"
            },
            "startDateLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "start-date-label",
                "reflect": false,
                "defaultValue": "null"
            },
            "endDateLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "end-date-label",
                "reflect": false,
                "defaultValue": "null"
            },
            "multiDateHelperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "multi-date-helper-text",
                "reflect": false,
                "defaultValue": "null"
            },
            "generateDatesButtonText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "generate-dates-button-text",
                "reflect": false,
                "defaultValue": "null"
            },
            "saveDateButtonText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "save-date-button-text",
                "reflect": false,
                "defaultValue": "null"
            },
            "noDatesText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "no-dates-text",
                "reflect": false,
                "defaultValue": "null"
            },
            "yearsToAddToEndDate": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "years-to-add-to-end-date",
                "reflect": false,
                "defaultValue": "null"
            },
            "minAmount": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "min-amount",
                "reflect": false,
                "defaultValue": "1"
            },
            "errorMessageEmpty": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "error-message-empty",
                "reflect": false
            },
            "errorMessageMinAmount": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "error-message-min-amount",
                "reflect": false
            },
            "minWarningAmount": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "min-warning-amount",
                "reflect": false,
                "defaultValue": "null"
            },
            "warningMessageMinAmount": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "warning-message-min-amount",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "rowCount": {},
            "rowData": {},
            "formValues": {}
        };
    }
    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"; }
    static get listeners() {
        return [{
                "name": "rowValueChange",
                "method": "predefinedValueChange",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "deleteRowEvent",
                "method": "deleteRowEvent",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=pn-multi-row-connected-dropdown.js.map
