import { DEBUG } from "cc/env";

/**
 * Cocos Creator 工具栏管理器
 * 用于动态控制工具栏的显示和隐藏
 */
export class ToolbarManager {
  private static _ins: ToolbarManager;
  private _isHidden: boolean = false;
  private _styleElement: HTMLStyleElement | null = null;

  public static get ins(): ToolbarManager {
    return this._ins ?? (this._ins = new ToolbarManager());
  }

  /**
   * 隐藏工具栏
   */
  public hideToolbar(): void {
    if (this._isHidden) return;

    // 创建隐藏样式
    this._styleElement = document.createElement('style');
    this._styleElement.id = 'cocos-toolbar-hide';
    this._styleElement.textContent = `
      /* 隐藏 Cocos Creator 工具栏 */
      .cocos-toolbar,
      .toolbar,
      .cc-toolbar,
      .editor-toolbar,
      [class*="toolbar"],
      [id*="toolbar"],
      [class*="Toolbar"],
      [id*="Toolbar"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
      }
      
      /* 隐藏可能的工具栏容器 */
      .toolbar-container,
      .toolbar-wrapper,
      .editor-toolbar-container {
        display: none !important;
      }
    `;
    
    document.head.appendChild(this._styleElement);
    this._isHidden = true;
    
    console.log('[ToolbarManager] 工具栏已隐藏');
  }

  /**
   * 显示工具栏
   */
  public showToolbar(): void {
    if (!this._isHidden) return;

    // 移除隐藏样式
    if (this._styleElement) {
      this._styleElement.remove();
      this._styleElement = null;
    }
    
    this._isHidden = false;
    console.log('[ToolbarManager] 工具栏已显示');
  }

  /**
   * 切换工具栏显示状态
   */
  public toggleToolbar(): void {
    if (this._isHidden) {
      this.showToolbar();
    } else {
      this.hideToolbar();
    }
  }

  /**
   * 检查工具栏是否隐藏
   */
  public isToolbarHidden(): boolean {
    return this._isHidden;
  }

  /**
   * 通过 JavaScript 直接操作 DOM 隐藏工具栏
   */
  public hideToolbarByDOM(): void {
    const toolbarSelectors = [
      '.cocos-toolbar',
      '.toolbar',
      '.cc-toolbar', 
      '.editor-toolbar',
      '[class*="toolbar"]',
      '[id*="toolbar"]',
      '[class*="Toolbar"]',
      '[id*="Toolbar"]'
    ];

    let hiddenCount = 0;
    toolbarSelectors.forEach(selector => {
      const elements = document.querySelectorAll(selector);
      elements.forEach(el => {
        const element = el as HTMLElement;
        if (element.style.display !== 'none') {
          element.style.display = 'none';
          hiddenCount++;
        }
      });
    });

    console.log(`[ToolbarManager] 通过 DOM 操作隐藏了 ${hiddenCount} 个工具栏元素`);
  }

  /**
   * 通过 JavaScript 直接操作 DOM 显示工具栏
   */
  public showToolbarByDOM(): void {
    const toolbarSelectors = [
      '.cocos-toolbar',
      '.toolbar',
      '.cc-toolbar',
      '.editor-toolbar', 
      '[class*="toolbar"]',
      '[id*="toolbar"]',
      '[class*="Toolbar"]',
      '[id*="Toolbar"]'
    ];

    let shownCount = 0;
    toolbarSelectors.forEach(selector => {
      const elements = document.querySelectorAll(selector);
      elements.forEach(el => {
        const element = el as HTMLElement;
        if (element.style.display === 'none') {
          element.style.display = '';
          shownCount++;
        }
      });
    });

    console.log(`[ToolbarManager] 通过 DOM 操作显示了 ${shownCount} 个工具栏元素`);
  }

  /**
   * 初始化工具栏管理器
   */
  public init(): void {
    // 检查是否需要自动隐藏工具栏
    if (localStorage.getItem('hide_cocos_toolbar') === 'true') {
      this.hideToolbar();
    }
    
    console.log('[ToolbarManager] 工具栏管理器已初始化');
  }

  /**
   * 设置工具栏隐藏状态并保存到本地存储
   */
  public setToolbarHidden(hidden: boolean): void {
    localStorage.setItem('hide_cocos_toolbar', hidden.toString());
    
    if (hidden) {
      this.hideToolbar();
    } else {
      this.showToolbar();
    }
  }
}