import { EventBus } from '../core/EventBus';
import { CalendarView, IEventBus } from '../types/CalendarTypes';
import { calendarConfig } from '../core/CalendarConfig';
import { EventTypes } from '../constants/EventTypes';

/**
 * ViewManager - Håndterer skift mellem dag/uge/måned visninger
 * Arbejder med custom tags fra POC design
 */
export class ViewManager {
    private eventBus: IEventBus;
    private currentView: CalendarView = 'week';

    constructor(eventBus: IEventBus) {
        this.eventBus = eventBus;
        this.setupEventListeners();
    }

    private setupEventListeners(): void {
        this.eventBus.on(EventTypes.CALENDAR_INITIALIZED, () => {
            this.initializeView();
        });

        this.eventBus.on(EventTypes.VIEW_CHANGE_REQUESTED, (event: Event) => {
            const customEvent = event as CustomEvent;
            const { currentView } = customEvent.detail;
            this.changeView(currentView);
        });

        this.eventBus.on(EventTypes.DATE_CHANGED, () => {
            this.refreshCurrentView();
        });

        // Setup view button handlers
        this.setupViewButtonHandlers();
        
        // Setup workweek preset button handlers
        this.setupWorkweekButtonHandlers();
        
    }

    private setupViewButtonHandlers(): void {
        const viewButtons = document.querySelectorAll('swp-view-button[data-view]');
        viewButtons.forEach(button => {
            button.addEventListener('click', (event) => {
                event.preventDefault();
                const view = button.getAttribute('data-view') as CalendarView;
                if (view && this.isValidView(view)) {
                    this.changeView(view);
                }
            });
        });
    }

    private setupWorkweekButtonHandlers(): void {
        const workweekButtons = document.querySelectorAll('swp-preset-button[data-workweek]');
        workweekButtons.forEach(button => {
            button.addEventListener('click', (event) => {
                event.preventDefault();
                const workweekId = button.getAttribute('data-workweek');
                if (workweekId) {
                    this.changeWorkweek(workweekId);
                }
            });
        });
    }


    private initializeView(): void {
        this.updateViewButtons();
        this.updateWorkweekButtons();
        
        this.eventBus.emit(EventTypes.VIEW_RENDERED, {
            view: this.currentView
        });
    }

    private changeView(newView: CalendarView): void {
        if (newView === this.currentView) return;

        const previousView = this.currentView;
        this.currentView = newView;

        console.log(`ViewManager: Changing view from ${previousView} to ${newView}`);

        this.updateViewButtons();
        
        this.eventBus.emit(EventTypes.VIEW_CHANGED, { 
            previousView,
            currentView: newView 
        });
    }

    private changeWorkweek(workweekId: string): void {
        console.log(`ViewManager: Changing workweek to ${workweekId}`);
        
        // Update the calendar config
        calendarConfig.setWorkWeek(workweekId);
        
        // Update button states
        this.updateWorkweekButtons();
        
        // Trigger a calendar refresh to apply the new workweek
        this.eventBus.emit(EventTypes.REFRESH_REQUESTED);
    }

    private updateViewButtons(): void {
        const viewButtons = document.querySelectorAll('swp-view-button[data-view]');
        viewButtons.forEach(button => {
            const buttonView = button.getAttribute('data-view') as CalendarView;
            if (buttonView === this.currentView) {
                button.setAttribute('data-active', 'true');
            } else {
                button.removeAttribute('data-active');
            }
        });
    }

    private updateWorkweekButtons(): void {
        const currentWorkweek = calendarConfig.getCurrentWorkWeek();
        const workweekButtons = document.querySelectorAll('swp-preset-button[data-workweek]');
        
        workweekButtons.forEach(button => {
            const buttonWorkweek = button.getAttribute('data-workweek');
            if (buttonWorkweek === currentWorkweek) {
                button.setAttribute('data-active', 'true');
            } else {
                button.removeAttribute('data-active');
            }
        });
    }

    private refreshCurrentView(): void {
        this.eventBus.emit(EventTypes.VIEW_RENDERED, {
            view: this.currentView
        });
    }

    private isValidView(view: string): view is CalendarView {
        return ['day', 'week', 'month'].includes(view);
    }

    public getCurrentView(): CalendarView {
        return this.currentView;
    }

    public refresh(): void {
        this.refreshCurrentView();
    }

    public destroy(): void {
        // Event listeners bliver automatisk fjernet af EventBus
    }
}