export default class FileExplorer {
    constructor(os) {
        this.os = os;
        this.element = document.getElementById('file-explorer');
        this.listElement = document.getElementById('file-list');
        this.closeBtn = this.element.querySelector('.close-btn');
        
        this.fileData = [
            { name: "Documents", type: "folder", icon: "folder", meta: "5 items • Modified today" },
            { name: "Downloads", type: "folder", icon: "folder", meta: "12 items • Modified yesterday" },
            { name: "Pictures", type: "folder", icon: "folder", meta: "28 items • Modified 2 days ago" },
            { name: "report.pdf", type: "file", icon: "insert_drive_file", meta: "PDF • 2.4 MB • Today" },
            { name: "photo_001.jpg", type: "image", icon: "image", meta: "JPEG • 3.8 MB • Today" },
            { name: "notes.txt", type: "document", icon: "description", meta: "Text • 1.2 KB • Yesterday" },
            { name: "Music", type: "folder", icon: "folder", meta: "45 items • Modified last week" }
        ];

        this.initialize();
        this.render();
    }

    initialize() {
        this.closeBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            this.os.closeAllPopups();
        });
    }

    render() {
        this.listElement.innerHTML = '';
        const fragment = document.createDocumentFragment();

        this.fileData.forEach(file => {
            const fileEl = document.createElement('div');
            fileEl.className = 'file-item';
            fileEl.innerHTML = `
                <div class="file-icon file-${file.type}">
                    <span class="material-icons">${file.icon}</span>
                </div>
                <div class="file-info">
                    <span class="file-name">${file.name}</span>
                    <span class="file-meta">${file.meta}</span>
                </div>
            `;

            fileEl.addEventListener('click', (e) => {
                this.listElement.querySelectorAll('.file-item').forEach(el => el.classList.remove('selected'));
                fileEl.classList.add('selected');
                e.stopPropagation();
            });

            fragment.appendChild(fileEl);
        });

        this.listElement.appendChild(fragment);
    }

    open() {
        this.element.classList.add('active');
        this.os.components.taskbar.updateActiveButton('fileExplorer');
    }

    close() {
        this.element.classList.remove('active');
        this.listElement.querySelectorAll('.file-item').forEach(el => el.classList.remove('selected'));
        this.os.components.taskbar.updateActiveButton(null);
    }
}
