class LayoutUtil {
    static flattenObject(obj, prefix = '') {
        return _.reduce(obj, (acc, value, key) => {
            const fullKey = prefix ? `${prefix}.${key}` : key;
            if (_.isObject(value) && !_.isArray(value)) {
                _.assign(acc, this.flattenObject(value, fullKey));
            } else if (_.isArray(value)) {
                // Process each item in the array
                value.forEach((item, index) => {
                    // If the item is an object, recurse, otherwise assign directly
                    if (_.isObject(item)) {
                        _.assign(acc, this.flattenObject(item, `${fullKey}[${index}]`));
                    } else {
                        acc[`${fullKey}[${index}]`] = item;
                    }
                });
            } else {
                acc[fullKey] = value;
            }
            return acc;
        }, {});
    }

    static createGroup(groupModel) {
        let groupHtml = `<div><h6>${groupModel.groupTitle}</h6>`;

        groupModel.fields.forEach(item => {
            groupHtml += this.createFormElement(item);
        });

        groupHtml += '</div>';
        return groupHtml;
    }

    static createTextInput(elementModel) {
        return `
        <div class="form-floating mb-2">
            <input type="text" name="${elementModel.path}" class="form-control mb-2" id="${elementModel.path}" placeholder="${elementModel.placeholder}">
            <label for="${elementModel.path}" class="form-label">${elementModel.label}</label>
        </div>
    `;
    }

    static createBooleanInput(elementModel) {
        return `
        <div class="form-floating mb-2">
            <div class="form-check form-check-inline">
                <input type="checkbox" name="${elementModel.path}" class="form-check-input mb-2" id="${elementModel.path}" placeholder="${elementModel.placeholder}">
                <label class="form-check-label"  for="${elementModel.path}" class="form-label">${elementModel.label}</label>
            </div>
        </div>`;

    }


    static createSelectInput(elementModel) {
        const optionsHtml = elementModel.options.map(optionValue => `<option value="${optionValue}">${optionValue}</option>`).join('');

        return `
        <div class="form-floating mb-2">
            <select class="form-select mb-2" id="${elementModel.path}" name="${elementModel.path}">
                ${optionsHtml}
            </select>
            <label for="${elementModel.path}" class="form-label">${elementModel.label}</label>
        </div>
    `;
    }

    static createTextAreaInput(elementModel) {
        return `
        <div class="form-floating mb-2">
            <textarea class="form-control mb-2" name="${elementModel.path}" id="${elementModel.path}" placeholder="${elementModel.placeholder}"></textarea>
            <label for="${elementModel.path}" class="form-label">${elementModel.label}</label>
        </div>`;
    }

    static createFormElement(elementModel) {
        switch (elementModel.type) {
            case "boolean":
                return this.createBooleanInput(elementModel);
            case "text":
                return this.createTextInput(elementModel);
            case "select":
                return this.createSelectInput(elementModel);
            case "textarea":
                return this.createTextAreaInput(elementModel);
            default:
                console.error("Unsupported element type: " + elementModel.type);
                return '';
        }
    }

    static createForm(model) {
        let formHtml = '';
        model.forEach(group => {
            formHtml += this.createGroup(group);
        });
        return formHtml;
    }

    static getFieldValue(element) {
        if ($(element).is('select') || $(element).is('input[type="text"]') || $(element).is('textarea')) {
            return $(element).val();
        }
        if ($(element).is('input[type="checkbox"]')) {
            return $(element).is(':checked');
        }
    }

    static echartReplacer(key, value) {
        if (key === 'echart' || key === 'series') {
            return undefined;
        }
        return value;
    }
}

export default LayoutUtil;