function setUsedMaterials(materials) {
    const parsedMaterialsData = parseUsedMaterials(materials);
    showMaterialsList(parsedMaterialsData);
}

function parseUsedMaterials(materialsResponse) {
    const materialsData = JSON.parse(materialsResponse);

    const parsedData = materialsData.usedMaterials.reduce((acc, materialEntry) => {
    const { variantsName, currentSelected, names } = materialEntry;

    acc[variantsName] = {
        currentSelectedIndex: currentSelected,
        options: names.map((name, index) => ({ name, id: index })),
    };
    return acc;
    }, {});
    return parsedData;
}

function showMaterialsList(parsedMaterialsData) {
    const materialsCategory = document.querySelector('.materials-category');
    displayUsedMaterials(parsedMaterialsData);
    if (materialsCategory) {
    materialsCategory.classList.remove('hidden');
    }
}

function clearMaterials() {
    const materialsContainer = document.querySelector('.materials-category');
    materialsContainer.innerHTML = '';
}

function displayUsedMaterials(materialsData) {
    clearMaterials();
    const materialsContainer = document.querySelector('.materials-category');

    for (const [variantsName, { currentSelectedIndex, options }] of Object.entries(materialsData)) {
    const materialDiv = document.createElement('div');
    materialDiv.classList.add('floor-material');
    materialDiv.setAttribute('draggable', 'false');

    const materialImage = document.createElement('img');
    materialImage.src = "https://gitlab.com/trisgram/company-graphics/-/raw/main/Identity/favicon.ico?ref_type=heads&inline=false";
    materialImage.alt = options[currentSelectedIndex].name;
    materialImage.classList.add('floor-image');
    materialImage.setAttribute('data-id', currentSelectedIndex);
    materialImage.setAttribute('draggable', 'false');

    const materialLabel = document.createElement('span');
    materialLabel.classList.add('item-label');
    materialLabel.textContent = variantsName;

    materialDiv.appendChild(materialImage);
    materialDiv.appendChild(materialLabel);

    if (options.length > 0) {
        const replacementsSelect = document.createElement('select');
        replacementsSelect.classList.add('replacement-select');

        const placeholderOption = document.createElement('option');
        placeholderOption.textContent = 'Select replacement...';
        placeholderOption.disabled = true;
        placeholderOption.selected = true;
        replacementsSelect.appendChild(placeholderOption);

        options.forEach(({ name, id }) => {
        const replacementOption = document.createElement('option');
        replacementOption.value = `${variantsName};${id}`;
        replacementOption.textContent = name;
        if (id === currentSelectedIndex) {
            replacementOption.selected = true;
        }
        replacementsSelect.appendChild(replacementOption);
        });

        replacementsSelect.addEventListener('change', () => {
        const selectedValue = replacementsSelect.value;
        const [selectedVariant, selectedId] = selectedValue.split(';');

        applicationInstance.SendMessage('ApplicationAPI', 'ReplaceMaterial', `${selectedVariant};${selectedId}`);
        });

        materialDiv.appendChild(replacementsSelect);
    }

    materialsContainer.appendChild(materialDiv);
    
    }
}