// Type definitions for Clusterflux
// A UI library providing SVG-based widgets

// Common types used across widgets
type ColorValue = string; // Hex color or CSS color name
type ElementId = string;  // ID of the SVG object element

// LED Widget
interface Led {
    initialize(container: HTMLElement): void;
    waitForInit(): Promise<void>;
    setColor(color: ColorValue): Promise<void>;
    setBrightness(level: number | 'on' | 'off'): void;
    setBlink(command: 'on' | 'off', rate?: number, dutyCycle?: number, count?: number): void;
    setBezelState(state: 'visible' | 'hidden'): void;
    setHoverText(text: string): void;
    clearHoverText(): void;
    setDynamicRange(startColor?: ColorValue, endColor?: ColorValue, value?: number): Promise<void>;
    updateDynamicColor(value: number): Promise<void>;
    clearDynamicMode(color?: ColorValue): Promise<void>;
}

// Toggle Widget
interface Toggle {
    initialize(container: HTMLElement): void;
    waitForInit(): Promise<void>;
    setState(state: boolean): Promise<void>;
    getState(): boolean;
    onStateChange(callback: (state: boolean) => void): void;
}

// Slider Widget
interface Slider {
    initialize(container: HTMLElement): void;
    waitForInit(): Promise<void>;
    setValue(value: number): Promise<void>;
    getValue(): number;
    onValueChange(callback: (value: number) => void): void;
    setColors(startColor: ColorValue, stopColor: ColorValue): Promise<void>;
    clearColors(): Promise<void>;
}

// Radio Widget
interface Radio {
    initialize(container: HTMLElement): void;
    waitForInit(): Promise<void>;
    setState(state: 'selected' | 'unselected'): Promise<void>;
    getState(): 'selected' | 'unselected';
    setRingColor(color: ColorValue): Promise<void>;
    setSelectColor(color: ColorValue): Promise<void>;
    onStateChange(callback: (state: 'selected' | 'unselected') => void): void;
    setGroup(groupName: string): void;
}

// Checkbox Widget
interface Checkbox {
    initialize(container: HTMLElement): void;
    waitForInit(): Promise<void>;
    setState(state: 'checked' | 'unchecked'): Promise<void>;
    getState(): 'checked' | 'unchecked';
    setBoxColor(color: ColorValue): Promise<void>;
    setCheckmarkColor(color: ColorValue): Promise<void>;
    onStateChange(callback: (state: 'checked' | 'unchecked') => void): void;
}

// Dropdown Widget Configuration
interface DropdownConfig {
    buttonText?: string;
    items?: Array<string | { label: string; value: any }>;
    width?: string;
    maxVisibleItems?: number;  // Maximum items shown before scrolling
    font?: string;
    fontSize?: string;
    textColor?: ColorValue;
    backgroundColor?: ColorValue;
    borderColor?: ColorValue;
    itemBorderColor?: ColorValue;  // Border color for dropdown items
    hoverColor?: ColorValue;
    gap?: string;
    itemDelayDelta?: number;
    itemBg?: ColorValue;
}

// Dropdown Widget
interface DropdownNugget {
    constructor(options?: DropdownConfig);
    initialize(container: HTMLElement): void;
    configure(options: DropdownConfig): void;
    setItems(items: Array<string | { label: string; value: any }>): void;
    toggle(): void;
    close(): void;
    onSelect(callback: (item: any) => void): void;
    destroy(): void;
}

// Floater Widget Configuration
interface FloaterConfig {
    text: string;
    font?: string;
    size?: string;
    color?: ColorValue;
    origin: { x: number; y: number };
    direction?: number | 'up' | 'down' | 'left' | 'right';
    speed?: number;
    pathVariance?: number;
    decay?: number;
}

// Static Floater Interface
interface FloaterStatic {
    createFloater(config: FloaterConfig): Promise<string>;
    clearAll(): void;
}

// Main Clusterflux namespace
export interface Clusterflux {
    Led: Led;
    Toggle: Toggle;
    Slider: Slider;
    Radio: Radio;
    Checkbox: Checkbox;
    DropdownNugget: DropdownNugget;
    Floater: FloaterStatic;
}

// Export the Clusterflux namespace and initialization function
export const Clusterflux: Clusterflux;

/**
 * Initialize Clusterflux components
 * @param param - Optional parameter:
 *   - null/undefined: Initialize all components in the document
 *   - HTMLElement with data-clusterflux: Initialize a single component
 *   - HTMLElement without data-clusterflux: Initialize all components within this container
 *   - string: Element ID (if element has data-clusterflux, initialize single component; otherwise scan container)
 */
export function initClusterflux(param?: HTMLElement | string): void;

// Export individual widgets
export const Led: Led;
export const Toggle: Toggle;
export const Slider: Slider;
export const Radio: Radio;
export const Checkbox: Checkbox;
export const DropdownNugget: DropdownNugget;
export const Floater: FloaterStatic;

// Factory namespace
export namespace factory {
    function createCheckbox(options?: {
        state?: 'checked' | 'unchecked';
        boxColor?: ColorValue;
        checkmarkColor?: ColorValue;
        onStateChange?: (state: 'checked' | 'unchecked') => void;
    }): HTMLElement;
    
    function createSlider(options?: {
        value?: number;
        startColor?: ColorValue;
        stopColor?: ColorValue;
        onValueChange?: (value: number) => void;
    }): HTMLElement;
    
    // Future factory functions will be added here
}