import { BaseBrush } from "../BaseBrush";

/**
 * 马克笔笔刷
 * 模拟马克笔效果，具有半透明平头笔触
 */
export class MarkerBrush extends BaseBrush {
  /**
   * 构造函数
   * @param {Object} canvas fabric画布实例
   * @param {Object} options 配置选项
   */
  constructor(canvas, options = {}) {
    super(canvas, {
      id: "marker",
      name: options.t("Canva.Marker"),
      description: "模拟马克笔效果，具有半透明平头笔触",
      category: options.t("Canvas.BasicBrushes"),
      icon: "marker",
      ...options,
    });

    // 马克笔特有属性
    this._baseWidth = options._baseWidth || 15;
    this._lineWidth = options._lineWidth || 2;
    this.capStyle = options.capStyle || "round"; // "round" 或 "square"
    this.blendMode = options.blendMode || "multiply"; // 混合模式
  }

  /**
   * 创建笔刷实例
   * @returns {Object} fabric笔刷实例
   */
  create() {
    if (!this.canvas) {
      throw new Error("画布实例不存在");
    }

    // 创建fabric原生马克笔笔刷
    this.brush = new fabric.MarkerBrush(this.canvas);

    // 配置笔刷
    this.configure(this.brush, this.options);

    return this.brush;
  }

  /**
   * 配置笔刷
   * @param {Object} brush fabric笔刷实例
   * @param {Object} options 配置选项
   */
  configure(brush, options = {}) {
    if (!brush) return;

    // 基础属性配置
    if (options.width !== undefined) {
      brush.width = options.width;
      // 更新笔刷相关属性
      this._baseWidth = options.width;
    }

    if (options.color !== undefined) {
      brush.color = options.color;
    }

    if (options.opacity !== undefined) {
      // 马克笔的透明度默认不要太高
      brush.opacity = Math.min(0.8, options.opacity || 0.6);
    }

    // 马克笔笔刷特有属性
    if (options._baseWidth !== undefined) {
      brush._baseWidth = options._baseWidth;
      this._baseWidth = options._baseWidth;
    }

    if (options._lineWidth !== undefined) {
      brush._lineWidth = options._lineWidth;
      this._lineWidth = options._lineWidth;
    }

    // 笔触样式设置
    brush.canvas.contextTop.lineJoin = "round";
    brush.canvas.contextTop.lineCap = this.capStyle || "round";

    // 马克笔的混合模式设置
    if (this.blendMode === "multiply") {
      brush.canvas.contextTop.globalCompositeOperation = "multiply";
    } else {
      brush.canvas.contextTop.globalCompositeOperation = "source-over";
    }
  }

  /**
   * 设置笔触线宽
   * @param {Number} width 线宽值
   */
  setLineWidth(width) {
    this._lineWidth = Math.max(1, Math.min(10, width));

    if (this.brush) {
      this.brush._lineWidth = this._lineWidth;
    }

    return this._lineWidth;
  }

  /**
   * 设置笔头样式
   * @param {String} style 笔头样式 ('round' 或 'square')
   */
  setCapStyle(style) {
    if (style === "round" || style === "square") {
      this.capStyle = style;

      if (this.brush && this.brush.canvas) {
        this.brush.canvas.contextTop.lineCap = style;
      }
    }

    return this.capStyle;
  }

  /**
   * 设置混合模式
   * @param {String} mode 混合模式 ('multiply' 或 'normal')
   */
  setBlendMode(mode) {
    this.blendMode = mode;

    if (this.brush && this.brush.canvas) {
      this.brush.canvas.contextTop.globalCompositeOperation =
        mode === "multiply" ? "multiply" : "source-over";
    }

    return this.blendMode;
  }

  /**
   * 获取笔刷可配置属性
   * @returns {Array} 可配置属性描述数组
   * @override
   */
  getConfigurableProperties() {
    // 获取基础属性
    const baseProperties = super.getConfigurableProperties();

    // 定义马克笔笔刷特有属性
    const markerProperties = [
      {
        id: "lineWidth",
        name: this.t('Canvas.MarkerWidth'),
        type: "slider",
        defaultValue: this._lineWidth,
        min: 1,
        max: 10,
        step: 0.5,
        description: this.t('Canvas.MarkerWidthDescription'),
        category: this.t('Canvas.MarkerSettings'),
        order: 100,
      },
      {
        id: "capStyle",
        name: this.t('Canvas.MarkerCapStyle'),
        type: "select",
        defaultValue: this.capStyle,
        options: [
          { value: "round", label: this.t('Canvas.MarkerCapStyleRound') },
          { value: "square", label: this.t('Canvas.MarkerCapStyleSquare') },
        ],
        description: this.t('Canvas.MarkerCapStyleDescription'),
        category: this.t('Canvas.MarkerSettings'),
        order: 110,
      },
      {
        id: "blendMode",
        name: this.t('Canvas.MarkerMixedModel'),
        type: "select",
        defaultValue: this.blendMode,
        options: [
          { value: "multiply", label: this.t('Canvas.MarkerMixedModelMultiply') },
          { value: "normal", label: this.t('Canvas.MarkerMixedModelNormal') },
        ],
        description: this.t('Canvas.MarkerMixedModelDescription'),
        category: this.t('Canvas.MarkerSettings'),
        order: 120,
      },
    ];

    // 合并并返回所有属性
    return [...baseProperties, ...markerProperties];
  }

  /**
   * 更新笔刷属性
   * @param {String} propId 属性ID
   * @param {any} value 属性值
   * @returns {Boolean} 是否更新成功
   * @override
   */
  updateProperty(propId, value) {
    // 先检查基类能否处理此属性
    if (super.updateProperty(propId, value)) {
      return true;
    }

    // 处理马克笔笔刷特有属性
    if (propId === "lineWidth") {
      this.setLineWidth(value);
      return true;
    } else if (propId === "capStyle") {
      this.setCapStyle(value);
      return true;
    } else if (propId === "blendMode") {
      this.setBlendMode(value);
      return true;
    }

    return false;
  }

  /**
   * 获取预览图
   * @returns {String} 预览图URL
   */
  getPreview() {
    return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMTAgNTBIOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyMCIgc3Ryb2tlLW9wYWNpdHk9IjAuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+";
  }
}
