import './index.css';
import { DescriptionOptions, DescriptionItem } from './types';
import { IBimComponent } from '../../types/component';
import { themeManager } from '../../services/theme';
import type { ThemeConfig } from '../../themes/types';

/**
 * 描述列表组件
 * 用于展示一组 Key-Value 数据
 * 注意：本组件为纯展示组件，不处理国际化，请在外部传入处理好的文本。
 */
export class BimDescription implements IBimComponent {
    private element: HTMLElement;
    private options: DescriptionOptions;
    private unsubscribeTheme: (() => void) | null = null;

    constructor(options: DescriptionOptions) {
        this.options = {
            bordered: false,
            ...options
        };

        this.element = this.createDom();

        const container = typeof this.options.container === 'string'
            ? document.getElementById(this.options.container)
            : this.options.container;

        if (container) {
            container.appendChild(this.element);
        }

        this.init();
    }

    public init(): void {
        this.applyCustomStyles();
        this.renderItems();

        // 订阅主题变更
        this.unsubscribeTheme = themeManager.subscribe((theme) => {
            this.setTheme(theme);
        });

        // 初始应用主题
        this.setTheme(themeManager.getTheme());
    }

    private createDom(): HTMLElement {
        const el = document.createElement('div');
        el.className = `bim-description ${this.options.className || ''}`;

        if (this.options.bordered) el.classList.add('is-bordered');

        return el;
    }

    private applyCustomStyles() {
        const style = this.element.style;

        // 应用全局字体大小
        if (this.options.fontSize) {
            style.setProperty('--bim-desc-font-size', this.options.fontSize);
        }

        // 应用全局 Label 颜色
        if (this.options.labelColor) {
            style.setProperty('--bim-desc-label-color', this.options.labelColor);
        }

        // 应用全局 Value 颜色
        if (this.options.valueColor) {
            style.setProperty('--bim-desc-value-color', this.options.valueColor);
        }

        // 应用 Padding 配置
        if (this.options.labelPadding) {
            style.setProperty('--bim-desc-label-padding', this.options.labelPadding);
        }

        if (this.options.valuePadding) {
            style.setProperty('--bim-desc-value-padding', this.options.valuePadding);
        }
    }

    private renderItems() {
        this.element.innerHTML = ''; // 清空现有内容

        this.options.items.forEach(item => {
            const itemEl = document.createElement('div');
            itemEl.className = `bim-description-item ${item.className || ''}`;

            // 1. Label
            const labelEl = document.createElement('div');
            labelEl.className = 'bim-description-label';

            // 行级颜色覆盖全局颜色
            if (item.labelColor) {
                labelEl.style.color = item.labelColor;
            }

            // 设置固定宽度
            if (this.options.labelWidth) {
                labelEl.style.width = this.options.labelWidth;
            }

            // 直接显示文本
            // bordered 模式移除冒号，普通模式保留
            labelEl.textContent = this.options.bordered ? item.label : (item.label + ':');

            // 2. Value
            const valueEl = document.createElement('div');
            valueEl.className = 'bim-description-value';

            // 行级颜色覆盖全局颜色
            if (item.valueColor) {
                valueEl.style.color = item.valueColor;
            }

            if (typeof item.value === 'string') {
                valueEl.innerHTML = item.value;
            } else {
                valueEl.appendChild(item.value);
            }

            itemEl.appendChild(labelEl);
            itemEl.appendChild(valueEl);
            this.element.appendChild(itemEl);
        });
    }

    /**
     * 动态更新数据
     */
    public setItems(items: DescriptionItem[]) {
        this.options.items = items;
        this.renderItems();
    }

    public setTheme(theme: ThemeConfig): void {
        const style = this.element.style;
        // 设置基础主题变量 (作为 fallback 或默认值)
        style.setProperty('--bim-text-color', theme.textPrimary);
        style.setProperty('--bim-label-color', theme.textSecondary);
        style.setProperty('--bim-value-color', theme.textPrimary);
        style.setProperty('--bim-border-color', theme.border);
    }

    public setLocales(): void {
        // 本组件不处理国际化
    }

    public destroy(): void {
        if (this.unsubscribeTheme) {
            this.unsubscribeTheme();
            this.unsubscribeTheme = null;
        }
        this.element.remove();
    }
}
