// font-size-presets.js - S/M/L font size controls for mobile readability

const fontSizePresets = {
    small: {
        body: 12,
        chartLabels: 10,
        chartTitle: 12
    },
    medium: {
        body: 16,
        chartLabels: 14,
        chartTitle: 16
    },
    large: {
        body: 20,
        chartLabels: 20,
        chartTitle: 24
    }
};

let currentFontSize = 'medium';

// Initialize font size UI
function initFontSizePresets() {
    const widgetContainer2 = document.getElementById('widgetContainer2');
    if (!widgetContainer2) return;

    // Create or get the shared toolbar row
    let toolbarRow = document.getElementById('chartToolbar');
    if (!toolbarRow) {
        toolbarRow = document.createElement('div');
        toolbarRow.id = 'chartToolbar';
        toolbarRow.className = 'd-flex flex-wrap justify-content-center align-items-center gap-0 mb-1 py-1 px-2 border rounded bg-body-tertiary';
        widgetContainer2.appendChild(toolbarRow);
    }

    const fontSizeDiv = document.createElement('div');
    fontSizeDiv.className = 'font-size-controls d-flex align-items-center ms-1';
    fontSizeDiv.innerHTML = `
        <div class="btn-group btn-group-sm" role="group">
            <button class="btn btn-outline-secondary font-size-btn px-1" data-size="small">S</button>
            <button class="btn btn-outline-secondary font-size-btn px-1 active" data-size="medium">M</button>
            <button class="btn btn-outline-secondary font-size-btn px-1" data-size="large">L</button>
        </div>
    `;

    // Insert into toolbar
    toolbarRow.appendChild(fontSizeDiv);

    setupFontSizeListeners();
    loadFontSizePreference();
}

// Set up click listeners for font size buttons
function setupFontSizeListeners() {
    document.querySelectorAll('.font-size-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            const size = this.dataset.size;
            applyFontSize(size);
        });
    });
}

// Apply a font size preset
function applyFontSize(size) {
    const preset = fontSizePresets[size];
    if (!preset) return;

    currentFontSize = size;

    // Update button states
    document.querySelectorAll('.font-size-btn').forEach(btn => {
        btn.classList.toggle('active', btn.dataset.size === size);
    });

    // Refresh the chart to apply new font size
    if (typeof VoteChart !== 'undefined') {
        VoteChart.render();
    }

    // Save preference
    localStorage.setItem('fontSizePreference', size);
}

// Load saved font size preference
function loadFontSizePreference() {
    const saved = localStorage.getItem('fontSizePreference');
    if (saved && fontSizePresets[saved]) {
        applyFontSize(saved);
    }
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', function () {
    // Wait for other scripts to load
    setTimeout(() => {
        initFontSizePresets();
    }, 100);
});

// Export for external use
window.fontSizePresets = {
    apply: applyFontSize,
    getCurrent: () => currentFontSize,
    getPresets: () => ({ ...fontSizePresets })
};
