// SimplifiedElements.js - 简化版元素API
import BaseElement from './BaseElement.js';
import Sprite from './Sprite.js';
import Box from './Box.js';
import TextElement from './TextElement.js';
import HtmlElement from './HtmlElement.js';
import SvgElement from './SvgElement.js';

/**
 * 简化版元素工厂类
 * 参考PixiJS、Egret和Vue 3的设计理念
 */
class SimplifiedElementFactory {
  /**
   * 创建元素
   * @param {string} type - 元素类型
   * @param {object} options - 元素选项
   * @param {string} engineId - 引擎ID
   * @returns {BaseElement} 创建的元素
   */
  static create(type, options = {}, engineId) {
    switch (type.toLowerCase()) {
      case 'sprite':
        return new SimplifiedSprite(options, engineId);
      case 'box':
        return new SimplifiedBox(options, engineId);
      case 'text':
        return new SimplifiedText(options, engineId);
      case 'html':
        return new SimplifiedHtml(options, engineId);
      case 'svg':
        return new SimplifiedSvg(options, engineId);
      default:
        throw new Error(`Unsupported element type: ${type}`);
    }
  }
}

/**
 * 简化版精灵类
 */
class SimplifiedSprite extends Sprite {
  constructor(options = {}, engineId) {
    super(
      options.image || new Image(), 
      options.x || 0, 
      options.y || 0, 
      options.width || 0, 
      options.height || 0, 
      engineId
    );
    
    // 应用样式
    if (options.style) {
      this.setStyle(options.style);
    }
    
    // 应用属性
    this._applyProperties(options);
  }
  
  /**
   * 应用属性
   * @param {object} options - 属性选项
   */
  _applyProperties(options) {
    if (options.name) {
      this.element.setAttribute('data-name', options.name);
    }
    
    if (options.visible !== undefined) {
      if (options.visible) {
        this.show();
      } else {
        this.hide();
      }
    }
  }
  
  /**
   * 简化的链式调用方法
   */
  position(x, y) {
    this.setPosition(x, y);
    return this;
  }
  
  size(width, height) {
    this.setSize(width, height);
    return this;
  }
  
  visible(visible) {
    if (visible) {
      this.show();
    } else {
      this.hide();
    }
    return this;
  }
  
  alpha(alpha) {
    this.setStyle({ opacity: alpha });
    return this;
  }
  
  scale(x, y = x) {
    this.setStyle({
      transform: `scale(${x}, ${y})`
    });
    return this;
  }
  
  rotate(angle) {
    this.setStyle({
      transform: `rotate(${angle}rad)`
    });
    return this;
  }
  
  tint(color) {
    this.setStyle({
      filter: `hue-rotate(${color}deg)`
    });
    return this;
  }
}

/**
 * 简化版容器类
 */
class SimplifiedBox extends Box {
  constructor(options = {}, engineId) {
    super(
      options.x || 0, 
      options.y || 0, 
      options.width || 0, 
      options.height || 0, 
      engineId
    );
    
    // 应用样式
    if (options.style) {
      this.setStyle(options.style);
    }
    
    // 应用属性
    this._applyProperties(options);
  }
  
  /**
   * 应用属性
   * @param {object} options - 属性选项
   */
  _applyProperties(options) {
    if (options.name) {
      this.element.setAttribute('data-name', options.name);
    }
    
    if (options.visible !== undefined) {
      if (options.visible) {
        this.show();
      } else {
        this.hide();
      }
    }
  }
  
  /**
   * 简化的链式调用方法
   */
  position(x, y) {
    this.setPosition(x, y);
    return this;
  }
  
  size(width, height) {
    this.setSize(width, height);
    return this;
  }
  
  visible(visible) {
    if (visible) {
      this.show();
    } else {
      this.hide();
    }
    return this;
  }
  
  alpha(alpha) {
    this.setStyle({ opacity: alpha });
    return this;
  }
  
  addChild(child) {
    this.add(child);
    return this;
  }
  
  removeChild(child) {
    this.remove(child);
    return this;
  }
}

/**
 * 简化版文本类
 */
class SimplifiedText extends TextElement {
  constructor(options = {}, engineId) {
    super(
      options.text || '', 
      options.x || 0, 
      options.y || 0, 
      engineId
    );
    
    // 应用样式
    if (options.style) {
      this.setStyle(options.style);
    }
    
    // 应用文本样式
    if (options.font) {
      this.setFont(options.font);
    }
    
    if (options.color) {
      this.setColor(options.color);
    }
    
    // 应用属性
    this._applyProperties(options);
  }
  
  /**
   * 应用属性
   * @param {object} options - 属性选项
   */
  _applyProperties(options) {
    if (options.name) {
      this.element.setAttribute('data-name', options.name);
    }
    
    if (options.visible !== undefined) {
      if (options.visible) {
        this.show();
      } else {
        this.hide();
      }
    }
  }
  
  /**
   * 简化的链式调用方法
   */
  position(x, y) {
    this.setPosition(x, y);
    return this;
  }
  
  text(text) {
    this.element.innerText = text;
    return this;
  }
  
  font(font) {
    this.element.style.font = font;
    return this;
  }
  
  color(color) {
    this.element.style.color = color;
    return this;
  }
  
  visible(visible) {
    if (visible) {
      this.show();
    } else {
      this.hide();
    }
    return this;
  }
  
  alpha(alpha) {
    this.setStyle({ opacity: alpha });
    return this;
  }
}

/**
 * 简化版HTML元素类
 */
class SimplifiedHtml extends HtmlElement {
  constructor(options = {}, engineId) {
    super(
      options.html || '', 
      options.x || 0, 
      options.y || 0, 
      engineId
    );
    
    // 应用样式
    if (options.style) {
      this.setStyle(options.style);
    }
    
    // 应用属性
    this._applyProperties(options);
  }
  
  /**
   * 应用属性
   * @param {object} options - 属性选项
   */
  _applyProperties(options) {
    if (options.name) {
      this.element.setAttribute('data-name', options.name);
    }
    
    if (options.visible !== undefined) {
      if (options.visible) {
        this.show();
      } else {
        this.hide();
      }
    }
  }
  
  /**
   * 简化的链式调用方法
   */
  position(x, y) {
    this.setPosition(x, y);
    return this;
  }
  
  html(html) {
    this.element.innerHTML = html;
    return this;
  }
  
  visible(visible) {
    if (visible) {
      this.show();
    } else {
      this.hide();
    }
    return this;
  }
  
  alpha(alpha) {
    this.setStyle({ opacity: alpha });
    return this;
  }
}

/**
 * 简化版SVG元素类
 */
class SimplifiedSvg extends SvgElement {
  constructor(options = {}, engineId) {
    super(
      options.x || 0, 
      options.y || 0, 
      options.width || 0, 
      options.height || 0, 
      options.content || '', 
      engineId
    );
    
    // 应用样式
    if (options.style) {
      this.setStyle(options.style);
    }
    
    // 应用属性
    this._applyProperties(options);
  }
  
  /**
   * 应用属性
   * @param {object} options - 属性选项
   */
  _applyProperties(options) {
    if (options.name) {
      this.element.setAttribute('data-name', options.name);
    }
    
    if (options.visible !== undefined) {
      if (options.visible) {
        this.show();
      } else {
        this.hide();
      }
    }
  }
  
  /**
   * 简化的链式调用方法
   */
  position(x, y) {
    this.setPosition(x, y);
    return this;
  }
  
  size(width, height) {
    this.setSize(width, height);
    return this;
  }
  
  content(content) {
    this.element.innerHTML = content;
    return this;
  }
  
  visible(visible) {
    if (visible) {
      this.show();
    } else {
      this.hide();
    }
    return this;
  }
  
  alpha(alpha) {
    this.setStyle({ opacity: alpha });
    return this;
  }
}

export { SimplifiedElementFactory, SimplifiedSprite, SimplifiedBox, SimplifiedText, SimplifiedHtml, SimplifiedSvg };