import { r as registerInstance, c as createEvent, g as getElement, h, d as Host } from './index-c0a4d8bd.js';
import { p as plus } from './plus-7ee93ae7.js';
import { v as v4 } from './v4-964634d6.js';

const pnMultiRowConnectedDropdownCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-multi-row-connected-dropdown{gap:1rem}pn-multi-row-connected-dropdown .connected-dropdown__row{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem;justify-content:space-between}pn-multi-row-connected-dropdown .connected-dropdown__row__no-margin{margin:0}pn-multi-row-connected-dropdown .connected-dropdown__button-right{margin-left:auto}";
const PnMultiRowConnectedDropdownStyle0 = pnMultiRowConnectedDropdownCss;

const PnMultiRowConnectedDropdown = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.allFormValues = createEvent(this, "allFormValues", 7);
        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;
    }
    get hostElement() { return getElement(this); }
    _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 v4();
    }
    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));
    }
};
PnMultiRowConnectedDropdown.style = PnMultiRowConnectedDropdownStyle0;

export { PnMultiRowConnectedDropdown as pn_multi_row_connected_dropdown };

//# sourceMappingURL=pn-multi-row-connected-dropdown.entry.js.map