export default class Settings {
    constructor(os) {
        this.os = os;
        this.element = document.getElementById('settings');
        this.listElement = document.getElementById('settings-list');
        this.closeBtn = this.element.querySelector('.close-btn');
        
        this.settingsData = [
            { label: "Dark Mode", icon: "dark_mode", active: false },
            { label: "Notifications", icon: "notifications", active: true },
            { label: "Sound Effects", icon: "volume_up", active: true },
            { label: "Bluetooth", icon: "bluetooth", active: false },
            { label: "Location Services", icon: "location_on", active: false }
        ];

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

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

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

        this.settingsData.forEach((setting, index) => {
            const settingEl = document.createElement('div');
            settingEl.className = 'setting-item';
            
            const activeClass = setting.active ? 'active' : '';
            
            settingEl.innerHTML = `
                <div class="setting-info">
                    <span class="material-icons setting-icon">${setting.icon}</span>
                    <span class="setting-label">${setting.label}</span>
                </div>
                <div class="toggle-switch ${activeClass}" data-index="${index}">
                    <div class="toggle-thumb"></div>
                </div>
            `;

            const toggleSwitch = settingEl.querySelector('.toggle-switch');
            toggleSwitch.addEventListener('click', (e) => {
                e.stopPropagation();
                // Toggle active state locally
                this.settingsData[index].active = !this.settingsData[index].active;
                toggleSwitch.classList.toggle('active');
            });

            // Make whole row clickable
            settingEl.addEventListener('click', (e) => {
                e.stopPropagation();
                // Find and click the toggle switch inside
                toggleSwitch.click();
            });

            fragment.appendChild(settingEl);
        });

        this.listElement.appendChild(fragment);
    }

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

    close() {
        this.element.classList.remove('active');
        this.os.components.taskbar.updateActiveButton(null);
    }
}