from dash.dependencies import Input, Output, State
from dash import clientside_callback


def setting_callback():
    clientside_callback(
        """
        function(n_intervals) {
            const clockButton = document.getElementById('clock-button');
            const clockTooltip = document.getElementById('clock-tooltip');
            if (clockButton && clockTooltip) {
                clockButton.addEventListener('mouseover', () => {
                    clockTooltip.style.display = 'block';
                });
                clockButton.addEventListener('mouseout', () => {
                    clockTooltip.style.display = 'none';
                });
            }
            const infoButton = document.getElementById('info-button');
            const infoTooltip = document.getElementById('info-tooltip');
            if (infoButton && infoTooltip) {
                infoButton.addEventListener('mouseover', () => {
                    infoTooltip.style.display = 'block';
                });
                infoButton.addEventListener('mouseout', () => {
                    infoTooltip.style.display = 'none';
                });
                infoTooltip.addEventListener('mouseover', () => {
                    infoTooltip.style.display = 'block';
                });
                infoTooltip.addEventListener('mouseout', () => {
                    infoTooltip.style.display = 'none';
                });
            }
            return window.dash_clientside.no_update;
        }
        """,
        Output('clock-container', 'id'),
        Input('clock-interval', 'n_intervals'),
        prevent_initial_call=False
    )

    # Clientside callback for play button with API request
    clientside_callback(
        """
        async function(n_clicks, existing_children) {
            const button = document.getElementById('play-button');
            const tooltip = document.getElementById('play-tooltip');
            if (!button || !tooltip) return ['▶️', ''];
    
            if (n_clicks > 0) {
                button.style.cursor = 'wait';
                button.innerHTML = '🔄';
                tooltip.style.display = 'none';
    
                try {
                    const response = await fetch('/api/process_tweets', {
                        method: 'GET',
                        headers: {'Content-Type': 'application/json'}
                    });
                    const data = await response.json();
    
                    if (response.ok) {
                        button.innerHTML = '✅';
                        tooltip.innerHTML = `Success: ${data.message}`;
                        tooltip.style.display = 'block';
                    } else {
                        button.innerHTML = '🆘';
                        tooltip.innerHTML = `Error: ${data.error}`;
                        tooltip.style.display = 'block';
                    }
                } catch (error) {
                    button.innerHTML = '🆘';
                    tooltip.innerHTML = `Error: Network failure - ${error.message}`;
                    tooltip.style.display = 'block';
                }
    
                setTimeout(() => {
                    button.innerHTML = '▶️';
                    button.style.cursor = 'pointer';
                    tooltip.style.display = 'none';
                    tooltip.innerHTML = '';
                }, 3000);
    
                return [button.innerHTML, tooltip.innerHTML];
            }
            return ['▶️', ''];
        }
        """,
        [Output('play-button', 'children'), Output('play-tooltip', 'children')],
        Input('play-button', 'n_clicks'),
        State('play-button', 'children'),
        prevent_initial_call=True
    )