// script.js

document.addEventListener('DOMContentLoaded', () => {
    const imageInput = document.getElementById('imageInput');
    const addImageButton = document.getElementById('addImageButton');
    const gallery = document.getElementById('gallery');
    const fileNameSpan = document.getElementById('fileName');

    // 파일 입력 변화 이벤트 리스너
    imageInput.addEventListener('change', () => {
        const file = imageInput.files[0];
        if (file) {
            fileNameSpan.textContent = file.name;
        } else {
            fileNameSpan.textContent = '';
        }
    });

    // 이미지 추가 버튼 클릭 이벤트 리스너
    addImageButton.addEventListener('click', () => {
        const file = imageInput.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const imgElement = document.createElement('img');
                imgElement.src = e.target.result;
                imgElement.alt = 'Uploaded Image';

                // 이미지 분석 및 배경색 결정 로직
                getAverageColor(imgElement).then(color => {
                    document.body.style.backgroundColor = color;
                }).catch(error => {
                    console.error('Error calculating average color:', error);
                });

                const deleteButton = document.createElement('button');
                deleteButton.classList.add('delete-button');
                deleteButton.innerText = 'Delete';
                deleteButton.addEventListener('click', () => {
                    galleryItem.remove();
                });

                const galleryItem = document.createElement('div');
                galleryItem.classList.add('gallery-item');
                galleryItem.appendChild(imgElement);
                galleryItem.appendChild(deleteButton);
                gallery.appendChild(galleryItem);

                imgElement.addEventListener('click', () => {
                    openLightbox(imgElement.src);
                });

                // 파일 선택 후 파일명 초기화
                imageInput.value = '';
                fileNameSpan.textContent = '';
            };
            reader.readAsDataURL(file);
        }
    });

    // 이미지 클릭시 라이트박스 열기
    function openLightbox(src) {
        const lightbox = document.createElement('div');
        lightbox.id = 'lightbox';
        lightbox.style.position = 'fixed';
        lightbox.style.top = '0';
        lightbox.style.left = '0';
        lightbox.style.width = '100%';
        lightbox.style.height = '100%';
        lightbox.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        lightbox.style.display = 'flex';
        lightbox.style.alignItems = 'center';
        lightbox.style.justifyContent = 'center';
        lightbox.style.zIndex = '1000';
        lightbox.innerHTML = `<img src="${src}" style="max-width: 90%; max-height: 90%;">`;
        document.body.appendChild(lightbox);

        lightbox.addEventListener('click', () => {
            lightbox.remove();
        });
    }

    // 이미지 주요 색상 추출 함수
    function getAverageColor(imgElement) {
        return new Promise((resolve, reject) => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = imgElement.width;
            canvas.height = imgElement.height;
            ctx.drawImage(imgElement, 0, 0);

            let r = 0, g = 0, b = 0;
            let count = 0;

            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;

            for (let i = 0; i < data.length; i += 4) {
                r += data[i];
                g += data[i + 1];
                b += data[i + 2];
                count++;
            }

            r = Math.floor(r / count);
            g = Math.floor(g / count);
            b = Math.floor(b / count);

            const rgbColor = `rgb(${r}, ${g}, ${b})`;
            resolve(rgbColor);
        });
    }
});