export default class Taskbar {
    constructor(os) {
        this.os = os;
        this.buttons = {
            start: document.getElementById('btn-start'),
            explorer: document.getElementById('btn-explorer'),
            browser: document.getElementById('btn-browser'),
            rustdesk: document.getElementById('btn-rustdesk'),
            settings: document.getElementById('btn-settings')
        };
        this.clockElement = document.getElementById('clock');
        
        this.initialize();
    }

    initialize() {
        // Start Menu Button
        this.buttons.start.addEventListener('click', (e) => {
            this.os.togglePopup('startMenu');
        });

        // File Explorer Button
        this.buttons.explorer.addEventListener('click', (e) => {
            this.os.togglePopup('fileExplorer');
        });

        // Browser Button
        this.buttons.browser.addEventListener('click', (e) => {
            this.os.togglePopup('browser');
        });

        // Remote Desktop Button
        this.buttons.rustdesk.addEventListener('click', (e) => {
            this.os.togglePopup('remoteDesktop');
        });

        // Settings Button
        this.buttons.settings.addEventListener('click', (e) => {
            this.os.togglePopup('settings');
        });

        this.startClock();
    }

    updateActiveButton(componentName) {
        // Remove active class from all
        Object.values(this.buttons).forEach(btn => btn.classList.remove('active'));
        
        // Add to mapped
        const map = {
            'startMenu': this.buttons.start,
            'fileExplorer': this.buttons.explorer,
            'browser': this.buttons.browser,
            'remoteDesktop': this.buttons.rustdesk,
            'settings': this.buttons.settings
        };
        
        if (componentName && map[componentName]) {
            map[componentName].classList.add('active');
        }
    }

    startClock() {
        const updateClock = () => {
            const now = new Date();
            let hours = now.getHours();
            let minutes = now.getMinutes();
            const ampm = hours >= 12 ? 'PM' : 'AM';
            
            hours = hours % 12;
            hours = hours ? hours : 12; // 0 should be 12
            minutes = minutes < 10 ? '0' + minutes : minutes;
            
            this.clockElement.textContent = `${hours}:${minutes} ${ampm}`;
        };
        
        updateClock();
        setInterval(updateClock, 1000);
    }
}
