import { BaseManager } from '../core/base-manager';
import { ManagerRegistry } from '../core/manager-registry';
import { RadialToolbar } from '../components/radial-toolbar';
import type { RadialMenuItem } from '../components/radial-toolbar/types';
import { themeManager } from '../services/theme';
import { getIcon } from '../utils/icon-manager';
import type { BottomDockStateChange } from './bottom-dock-manager';
import { createMeasureRadialButton } from '../components/radial-toolbar/buttons/measure';
import { createSectionRadialButton } from '../components/radial-toolbar/buttons/section';
import { createSettingRadialButton } from '../components/radial-toolbar/buttons/setting';
import { createWalkRadialButton } from '../components/radial-toolbar/buttons/walk';

export interface RadialToolbarManagerOptions {
    items?: RadialMenuItem[];
    itemsPerRing?: number;
}

export class RadialToolbarManager extends BaseManager {
    private toolbar: RadialToolbar | null = null;
    private unsubscribeDockState: (() => void) | null = null;

    constructor(container: HTMLElement, registry: ManagerRegistry, options?: RadialToolbarManagerOptions) {
        super(registry);
        this.toolbar = new RadialToolbar({
            container,
            items: options?.items ?? this.createDefaultItems(),
            itemsPerRing: options?.itemsPerRing ?? 4,
            mainButtonIcon: getIcon('主视角'),
            mainButtonLabel: 'toolbar.home',
            onMainButtonClick: () => {
                console.log('[RadialToolbar] main: home');
                this.registry.engine3d?.getEngineComponent()?.CameraGoHome();
            }
        });
        this.toolbar.setTheme(themeManager.getTheme());

        this.unsubscribeDockState = this.registry.bottomDock?.onStateChange(({ id, open }: BottomDockStateChange) => {
            this.toolbar?.setItemActive(id, open);
        }) ?? null;

        this.syncInitialToggleStates();
    }

    private createDefaultItems(): RadialMenuItem[] {
        return [
            createSettingRadialButton(this.registry),
            createMeasureRadialButton(this.registry),
            createSectionRadialButton(this.registry),
            createWalkRadialButton(this.registry),
        ];
    }

    private syncInitialToggleStates(): void {
        const dock = this.registry.bottomDock;
        if (!dock || !this.toolbar) {
            return;
        }

        this.toolbar.setItemActive('measure', dock.isOpen('measure'));
        this.toolbar.setItemActive('section', dock.isOpen('section'));
        this.toolbar.setItemActive('walk', dock.isOpen('walk'));
    }

    public destroy(): void {
        if (this.unsubscribeDockState) {
            this.unsubscribeDockState();
            this.unsubscribeDockState = null;
        }
        this.toolbar?.destroy();
        this.toolbar = null;
        super.destroy();
    }
}