// static/js/main.js

// Проверяем, что 'socket' уже инициализирован
if (!window.socket) {
    console.error('Socket is not initialized!');
}

document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.getElementById('menu-button');
    const dropdownMenu = document.getElementById('dropdown-menu');

    menuButton.addEventListener('click', () => {
        dropdownMenu.classList.toggle('hidden');
        dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
    });

    // Optional: Close the dropdown menu if the user clicks outside of it
    document.addEventListener('click', (event) => {
        if (!menuButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
            dropdownMenu.style.display = 'none';
        }
    });
});

document.getElementById('toggle-vr').addEventListener('click', () => {
    const vrWrapper = document.getElementById('vr-wrapper');

    if (vrWrapper) {
        vrWrapper.remove();
        boardWrapper.style.display = 'block'; // Показать оригинальную доску
    } else {
        // Создание контейнера VR
        const newVrWrapper = document.createElement('div');
        newVrWrapper.id = 'vr-wrapper';

        const leftHalf = document.createElement('div');
        leftHalf.className = 'half-screen';
        const rightHalf = document.createElement('div');
        rightHalf.className = 'half-screen';

        const boardWrapperCloneLeft = boardWrapper.cloneNode(true);
        const boardLeft = boardWrapperCloneLeft.firstElementChild;

        const boardWrapperCloneRight = boardWrapper.cloneNode(true);
        const boardRight = boardWrapperCloneRight.firstElementChild;

        // Функция для обновления трансформации
        const applyTransformShift = (element, shiftX) => {
            const currentTransform = element.style.transform || '';

            let newTransform;
            let translateXMatch = currentTransform.match(/translateX\(([-\d.]+)px\)/);
            let translateMatch = currentTransform.match(/translate\(([-\d.]+)px,\s*([-\d.]+)px\)/);

            if (translateXMatch) {
                const currentTranslateX = parseFloat(translateXMatch[1]);
                const newTranslateX = currentTranslateX + shiftX;
                newTransform = currentTransform.replace(/translateX\(([-\d.]+)px\)/, `translateX(${newTranslateX}px)`);
            } else if (translateMatch) {
                const currentTranslateX = parseFloat(translateMatch[1]);
                const currentTranslateY = parseFloat(translateMatch[2]);
                const newTranslateX = currentTranslateX + shiftX;
                newTransform = currentTransform.replace(/translate\(([-\d.]+)px,\s*([-\d.]+)px\)/, `translate(${newTranslateX}px, ${currentTranslateY}px)`);
            } else {
                newTransform = `translateX(${shiftX}px) ${currentTransform}`.trim();
            }

            element.style.transform = newTransform;
        };

        if (boardLeft) {
            boardLeft.id = 'board-left';
            applyTransformShift(boardLeft, 30); // Смещаем board-left на 30 пикселей вправо
        }

        if (boardRight) {
            boardRight.id = 'board-right';
            applyTransformShift(boardRight, -30); // Смещаем board-right на 30 пикселей влево
        }

        leftHalf.appendChild(boardWrapperCloneLeft);
        rightHalf.appendChild(boardWrapperCloneRight);

        newVrWrapper.appendChild(leftHalf);
        newVrWrapper.appendChild(rightHalf);
        document.body.appendChild(newVrWrapper);

        boardWrapper.style.display = 'none'; // Скрыть оригинальную доску
    }
});

// Event listener для кнопки 'add-note'
document.getElementById('add-note').addEventListener('click', () => {
    // Получаем размеры видимой области
    const rect = boardWrapper.getBoundingClientRect();

    const width = 200; // Ширина по умолчанию
    const height = 40; // Высота по умолчанию

    // Рассчитываем координаты центра видимой области с учётом текущего масштаба и смещения
    const centerX = ((rect.width / 2 - translateX) / scale) - width / 2;
    const centerY = ((rect.height / 2 - translateY) / scale) - height / 2;


    socket.emit('create_note', { text: 'New Comment', x: centerX, y: centerY, width, height });
});

// Event listener для кнопки 'add-image'
document.getElementById('add-image').addEventListener('click', () => {
    const formHtml = `
        <div id="image-form" style="position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:white; padding:20px; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,0.1); z-index: 1000;">
            <label for="image-url" style="display:block; margin-bottom:8px;">Image URL:</label>
            <input type="text" id="image-url" placeholder="Enter image URL" style="width: calc(100% - 22px); padding:10px; margin-bottom:12px; border:1px solid #ccc; border-radius:4px;"><br>
            <label for="image-file" style="display:block; margin-bottom:8px;">Or Upload File:</label>
            <input type="file" id="image-file" accept="image/*" style="margin-bottom:12px;"><br>
            <button id="add-image-submit" style="padding:10px 20px; background-color:#007bff; color:white; border:none; border-radius:4px; cursor:pointer; margin-right:8px;">Add Image</button>
            <button id="cancel-image" style="padding:10px 20px; background-color:#ccc; color:white; border:none; border-radius:4px; cursor:pointer;">Cancel</button>
        </div>
    `;
    document.body.insertAdjacentHTML('beforeend', formHtml);

    document.getElementById('add-image-submit').addEventListener('click', async () => {
        const url = document.getElementById('image-url').value;
        const fileInput = document.getElementById('image-file');
        let imageUrl;

        if (url) {
            imageData = {"url": url};
        } else if (fileInput.files.length > 0) {
            const file = fileInput.files[0];
            imageData = await uploadFile(file, '/upload');
        }

        if (imageData) {
            addImageToCenter(imageData);
            closeModal();
        }
    });

    document.getElementById('cancel-image').addEventListener('click', closeModal);

    function closeModal() {
        const form = document.getElementById('image-form');
        if (form) {
            form.remove();
        }
    }
});

// Обработка существующих заметок и изображений после загрузки страницы
document.addEventListener('DOMContentLoaded', () => {
    handleExistingNotes();
    handleExistingImages();
    handleExistingAudioElements();
});

const moveStepVr = 10;  // Шаг для перемещения
const zoomStepVr = 0.01;  // Шаг для увеличения-уменьшения
const MIN_SCALEVr = 0.05; // Минимальный масштаб
const MAX_SCALEVr = 5;   // Максимальный масштаб
const DEAD_ZONE = 0.1; // Мертвая зона для стиков

let translateVrXLeft = 0;
let translateVrYLeft = 0;
let scaleVrLeft = 0.05; // Начальный масштаб для левой части

let translateVrXRight = 0;
let translateVrYRight = 0;
let scaleVrRight = 0.05; // Начальный масштаб для правой части

function getInitialTransformValues(board) {
    const transform = board.style.transform || '';
    const translateMatch = transform.match(/translate\((-?\d*\.?\d*)px,\s*(-?\d*\.?\d*)px\)/);
    const scaleMatch = transform.match(/scale\((-?\d*\.?\d*)\)/);

    const translateX = translateMatch ? parseFloat(translateMatch[1]) : 0;
    const translateY = translateMatch ? parseFloat(translateMatch[2]) : 0;
    const scale = scaleMatch ? parseFloat(scaleMatch[1]) : 0.05;

    return { translateX, translateY, scale };
}

window.addEventListener('gamepadconnected', function(e) {
    console.log('Gamepad connected at index %d: %s. %d buttons, %d axes.',
        e.gamepad.index, e.gamepad.id,
        e.gamepad.buttons.length, e.gamepad.axes.length);
    requestAnimationFrame(handleGamepadInput);
});

function handleGamepadInput() {
    const gamepads = navigator.getGamepads();
    if (!gamepads) return;

    const gamepad = gamepads[0];
    if (!gamepad) return;

    const boardLeft = document.getElementById('board-left');
    const boardRight = document.getElementById('board-right');

    if (boardLeft && boardRight) {
        if (translateVrXLeft === 0 && translateVrYLeft === 0 && scaleVrLeft === 0.05) {
            const initialLeft = getInitialTransformValues(boardLeft);
            translateVrXLeft = initialLeft.translateX;
            translateVrYLeft = initialLeft.translateY;
            scaleVrLeft = initialLeft.scale;
        }

        if (translateVrXRight === 0 && translateVrYRight === 0 && scaleVrRight === 0.05) {
            const initialRight = getInitialTransformValues(boardRight);
            translateVrXRight = initialRight.translateX;
            translateVrYRight = initialRight.translateY;
            scaleVrRight = initialRight.scale;
        }

        // Проверьте кнопки увеличения/уменьшения масштаба
        // Обновите индексы кнопок, если они не соответствуют
        if (gamepad.buttons[5].pressed) { // Обновите индексы для своего геймпада
            scaleVrLeft = Math.max(MIN_SCALEVr, scaleVrLeft - zoomStepVr);
            scaleVrRight = Math.max(MIN_SCALEVr, scaleVrRight - zoomStepVr);
        }
        if (gamepad.buttons[3].pressed) {  // Обновите индексы для своего геймпада
            scaleVrLeft = Math.min(MAX_SCALEVr, scaleVrLeft + zoomStepVr);
            scaleVrRight = Math.min(MAX_SCALEVr, scaleVrRight + zoomStepVr);
        }

        // Проверка осей стиков для перемещения с учетом мертвой зоны
        const moveLeftX = Math.abs(gamepad.axes[0]) > DEAD_ZONE ? gamepad.axes[0] * moveStepVr : 0;
        const moveLeftY = Math.abs(gamepad.axes[1]) > DEAD_ZONE ? gamepad.axes[1] * moveStepVr : 0;
        const moveRightX = Math.abs(gamepad.axes[0]) > DEAD_ZONE ? gamepad.axes[0] * moveStepVr : 0;
        const moveRightY = Math.abs(gamepad.axes[1]) > DEAD_ZONE ? gamepad.axes[1] * moveStepVr : 0;

        translateVrXLeft -= moveLeftX;
        translateVrYLeft -= moveLeftY;
        translateVrXRight -= moveRightX;
        translateVrYRight -= moveRightY;

        updateVRTransform(boardLeft, translateVrXLeft, translateVrYLeft, scaleVrLeft);
        updateVRTransform(boardRight, translateVrXRight, translateVrYRight, scaleVrRight);
    }

    requestAnimationFrame(handleGamepadInput);
}

function updateVRTransform(board, translateX, translateY, scale) {
    board.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
    board.style.backgroundPosition = `${translateX}px ${translateY}px`;
}


У меня увеличение всегда идет к началу координат, как мне изменить код, чтобы зум был всегда к центрам левой и правой области?