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

/**
 * 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';
    private eventCleanup: (() => void)[] = [];
    private buttonListeners: Map<Element, EventListener> = new Map();

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

    private setupEventListeners(): void {
        // Track event bus listeners for cleanup
        this.eventCleanup.push(
            this.eventBus.on(CoreEvents.INITIALIZED, () => {
                this.initializeView();
            })
        );

        this.eventCleanup.push(
            this.eventBus.on(CoreEvents.VIEW_CHANGED, (event: Event) => {
                const customEvent = event as CustomEvent;
                const { currentView } = customEvent.detail;
                this.changeView(currentView);
            })
        );

        this.eventCleanup.push(
            this.eventBus.on(CoreEvents.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 => {
            const handler = (event: Event) => {
                event.preventDefault();
                const view = button.getAttribute('data-view') as CalendarView;
                if (view && this.isValidView(view)) {
                    this.changeView(view);
                }
            };
            button.addEventListener('click', handler);
            this.buttonListeners.set(button, handler);
        });
    }

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


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

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

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


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

    private changeWorkweek(workweekId: string): void {
        
        // Update the calendar config
        calendarConfig.setWorkWeek(workweekId);
        
        // Update button states
        this.updateWorkweekButtons();
        
        // Trigger a calendar refresh to apply the new workweek
        this.eventBus.emit(CoreEvents.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(CoreEvents.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 {
        // Clean up event bus listeners
        this.eventCleanup.forEach(cleanup => cleanup());
        this.eventCleanup = [];
        
        // Clean up button listeners
        this.buttonListeners.forEach((handler, button) => {
            button.removeEventListener('click', handler);
        });
        this.buttonListeners.clear();
    }
}