import {CssType, HtmlPanel} from '@deep/engine';


/**
 * 传感器面板类
 */
export class SensorModal extends HtmlPanel {
    private sensorData: {
        sensors: Array<{
            type: string;
            channel: number;
            position: {
                x: number;
                y: number;
                z: number;
            };
        }>;
    } = {
        sensors: []
    };

    /**
     * 构造函数
     * @param type CSS渲染类型
     */
    constructor(type: CssType = CssType.CSS3D) {
        super(type);
        this.updateContentFromData();
    }

    /**
     * 更新传感器数据
     * @param data 新的传感器数据
     */
    updateData(data: {
        sensors: Array<{
            type: string;
            channel: number;
            position: {
                x: number;
                y: number;
                z: number;
            };
        }>;
    }): void {
        this.sensorData = data;
        this.updateContentFromData();
    }

    /**
     * 根据数据更新弹窗内容
     */
    private updateContentFromData(): void {
        // 使用 cssObject 的 uuid 作为唯一标识 作为 关闭按键的id
        const cssObject = this.getCssObject();
        const closeButtonId = cssObject.uuid;

        const content = `
            <div style="font-family: Arial, sans-serif; position: relative;">
                <button id="${closeButtonId}" style="position: absolute; top: 40px; right: 40px; background: #ff4444; color: white; border: none; border-radius: 20px; width: 120px; height: 120px; cursor: pointer; font-size: 80px; line-height: 1; pointer-events: auto;">×</button>
                <h2 style="margin-top: 0; color: #333; font-size: 120px;">传感器数据</h2>
                ${this.sensorData.sensors.length > 0 ?
            this.sensorData.sensors.map((sensor, index) => `
                        <div style="margin-bottom: 75px; padding: 60px; border: 5px solid #e0e0e0; border-radius: 20px;">
                            <h3 style="margin-top: 0; color: #555; font-size: 100px;">传感器 ${index + 1}</h3>
                            <div style="margin-bottom: 40px; font-size: 80px;">
                                <strong>类型:</strong> ${sensor.type}
                            </div>
                            <div style="margin-bottom: 40px; font-size: 80px;">
                                <strong>通道:</strong> ${sensor.channel}
                            </div>
                            <div style="margin-bottom: 40px; font-size: 80px;">
                                <strong>位置:</strong> (${sensor.position.x}, ${sensor.position.y}, ${sensor.position.z})
                            </div>
                        </div>
                    `).join('')
            : '<p style="color: #999; font-size: 80px;">暂无传感器数据</p>'
        }
            </div>
        `;
        this.updateContent(content);
        this.attachCloseButtonListener(closeButtonId);
    }

    /**
     * 附加关闭按钮事件监听器
     * @param buttonId 按钮ID
     */
    private attachCloseButtonListener(buttonId: string): void {
        // 使用 setTimeout 确保 DOM 已更新
        setTimeout(() => {
            const closeButton = document.getElementById(buttonId);
            if (closeButton) {
                closeButton.onclick = () => {
                    this.hide();
                };
            }
        }, 0);
    }
}