function selectItem(x, y) {
    const formattedX = x.toFixed(3);
    const formattedY = y.toFixed(3);

    selectedX = x;
    selectedY = y;
    isSelected = true;
    setCoordsControlButtons(formattedX, formattedY);
    showObjectControlButtons();
}

function selectItemWithInformation(id, x , y, w, h, posX, posY, posZ, snapAxisRotation) {
    const formattedX = x.toFixed(3);
    const formattedY = y.toFixed(3);

    selectedX = x;
    selectedY = y;
    isSelected = true;
    setCoordsControlButtons(formattedX, formattedY);
    showObjectControlButtons();
}

function deselectItem() {
    selectedX = undefined;
    selectedY = undefined;
    isSelected = false;
    hideObjectControlButtons();
}

canvas.addEventListener('dragover', (e) => {
    e.preventDefault();
    if (currentDraggingId) {
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight;
        draggedImage.style.display = 'none';
        areObjectButtonsHidden = true;
        const rect = canvas.getBoundingClientRect();
        const scale = window.devicePixelRatio || 1;
        const mouseX = (event.clientX - rect.left) * scale;
        const mouseY = (event.clientY - rect.top) * scale;
        const xOffset = screenWidth * 0.04;
        const intMouseY = mouseY | 0;
        if (hasObjectBeenCreated !== true) {
            const intOffsetX = (mouseX + xOffset) | 0;
            const createParams = {
                x: intOffsetX,
                y: intMouseY,
                addressableName: currentDraggingId,
                accesoryId: "",
                url: "",
                snapType: 1
            };
            applicationInstance.SendMessage('ApplicationAPI', 'Create', JSON.stringify(createParams));
            hideObjectControlButtons();
            hasObjectBeenCreated = true;
        } else {
            const intMouseX = mouseX | 0;
            const intOffsetY = mouseY | 0;
            applicationInstance.SendMessage('ApplicationAPI', 'Move', `${intMouseX};${intMouseY}`);
            hideObjectControlButtons();
        }
    }
});

function hideDraggedImage() {
    draggedImage.style.display = 'none';
}

document.addEventListener('drag', (e) => {
    e.preventDefault();
    
    if (draggedImage) {
        draggedImage.style.left = `${e.pageX - 50}px`;
        draggedImage.style.top = `${e.pageY - 50}px`;
    }
});    

canvas.addEventListener('dragleave', (e) => {
    e.preventDefault();

    applicationInstance.SendMessage('ApplicationAPI', 'Delete');
    areObjectButtonsHidden = false;
    hasObjectBeenCreated = false;

    draggedImage = document.createElement('img');
    document.body.appendChild(draggedImage);

    draggedImage.style.left = `${e.pageX - 50}px`;
    draggedImage.style.top = `${e.pageY - 50}px`;

    draggedImage.style.position = 'absolute';
    draggedImage.style.overflow = 'hidden';
    draggedImage.style.objectFit = 'cover';
    draggedImage.style.pointerEvents = 'none';
    draggedImage.src = "https://gitlab.com/trisgram/company-graphics/-/raw/main/Identity/favicon.ico?ref_type=heads&inline=false";
    draggedImage.style.opacity = '0.7';
    draggedImage.style.height = '100px';

});

canvas.addEventListener('drop', (e) => {    
    draggedImage.style.display = 'none';
    if (currentDraggingId) {
        areObjectButtonsHidden = false;
        currentDraggingId = null;
        hasObjectBeenCreated = false;
        showObjectControlButtons();
        hideDraggedImage();
    }
});

document.addEventListener('DOMContentLoaded', () => {
    const categories = document.querySelectorAll('.category');
    const itemCategories = document.querySelectorAll('.item-list > div');

    categories.forEach(category => {
    category.addEventListener('click', () => {
        categories.forEach(cat => cat.classList.remove('selected'));

        itemCategories.forEach(itemCat => {
        itemCat.classList.add('hidden');
        });

        const target = category.getAttribute('data-target');
        const selectedCategory = document.querySelector(target);

        if (selectedCategory) {
        selectedCategory.classList.remove('hidden');
        }

        if (target === ".painting-category" || target === ".flooring-category") {
        switchOnWallpaintMode();
        }

        if (target !== ".painting-category" && target !== ".flooring-category") {
        switchOffWallpaintMode();
        }

        category.classList.add('selected');
    });
    });
});