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

/**
 * 丝带笔刷
 * 创建流畅的飘带状线条
 */
export class RibbonBrush extends BaseBrush {
  /**
   * 构造函数
   * @param {Object} canvas fabric画布实例
   * @param {Object} options 配置选项
   */
  constructor(canvas, options = {}) {
    super(canvas, {
      id: "ribbon",
      name: options.t('Canvas.Ribbon'),
      description: "创建流畅的飘带状线条，具有动态宽度变化和曲线美感",
      category: options.t('Canvas.SpecialEffectsBrush'),
      icon: "ribbon",
      ...options,
    });

    // 丝带笔刷特有属性
    this.ribbonWidth = options.ribbonWidth || 20;
    this.widthVariation = options.widthVariation || 0.5;
    this.ribbonSmoothness = options.ribbonSmoothness || 0.7;
    this.gradient = options.gradient !== undefined ? options.gradient : true;
    this.gradientColors = options.gradientColors || ["#000000", "#555555"];
  }

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

    // 创建fabric原生丝带笔刷
    this.brush = new fabric.RibbonBrush(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.ribbonWidth = options.width * 2;
    }

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

      // 如果启用渐变，更新渐变的第一个颜色
      if (this.gradient && this.gradientColors.length > 0) {
        this.gradientColors[0] = options.color;
        this.updateGradient();
      }
    }

    if (options.opacity !== undefined) {
      brush.opacity = options.opacity;
      // 如果启用渐变，更新渐变的第一个颜色
      if (this.gradient && this.gradientColors.length > 0) {
        this.gradientColors[0] = this._createRGBAColor(brush.color, options.opacity);
        this.updateGradient();
      }
      brush.canvas.freeDrawingBrush.opacity = options.opacity;
    }

    // 丝带笔刷特有属性
    if (options.ribbonWidth !== undefined) {
      this.ribbonWidth = options.ribbonWidth;

      // 如果原生笔刷支持此属性
      if (brush.ribbonWidth !== undefined) {
        brush.ribbonWidth = this.ribbonWidth;
      }
    }

    if (options.widthVariation !== undefined) {
      this.widthVariation = options.widthVariation;

      // 如果原生笔刷支持此属性
      if (brush.widthVariation !== undefined) {
        brush.widthVariation = this.widthVariation;
      }
    }

    if (options.ribbonSmoothness !== undefined) {
      this.ribbonSmoothness = options.ribbonSmoothness;

      // 如果原生笔刷支持此属性
      if (brush.ribbonSmoothness !== undefined) {
        brush.ribbonSmoothness = this.ribbonSmoothness;
      }
    }

    if (options.gradient !== undefined) {
      this.gradient = options.gradient;
      this.updateGradient();
    }

    if (options.gradientColors !== undefined) {
      this.gradientColors = options.gradientColors;
      this.updateGradient();
    }
  }

  /**
   * 更新渐变设置
   * @private
   */
  updateGradient() {
    if (!this.brush || !this.canvas) return;

    if (this.gradient && this.gradientColors.length >= 2) {
      // 创建渐变对象
      const ctx = this.canvas.contextTop;
      const gradient = ctx.createLinearGradient(0, 0, this.ribbonWidth, 0);

      // 添加渐变色
      const colorCount = this.gradientColors.length;
      this.gradientColors.forEach((color, index) => {
        gradient.addColorStop(index / (colorCount - 1), color);
      });

      // 如果原生笔刷支持渐变
      if (typeof this.brush.setGradient === "function") {
        this.brush.setGradient(gradient);
      } else if (this.brush.gradient !== undefined) {
        this.brush.gradient = gradient;
      }

      // 如果原生笔刷支持渐变标志
      if (this.brush.useGradient !== undefined) {
        this.brush.useGradient = true;
      }
    } else if (this.brush.useGradient !== undefined) {
      // 禁用渐变
      this.brush.useGradient = false;
    }
  }

  /**
   * 设置丝带宽度
   * @param {Number} width 宽度值
   */
  setRibbonWidth(width) {
    this.ribbonWidth = Math.max(5, Math.min(100, width));

    if (this.brush && this.brush.ribbonWidth !== undefined) {
      this.brush.ribbonWidth = this.ribbonWidth;
    }

    // 更新渐变（因为宽度变了）
    if (this.gradient) {
      this.updateGradient();
    }

    return this.ribbonWidth;
  }

  /**
   * 设置宽度变化率
   * @param {Number} variation 变化率(0-1)
   */
  setWidthVariation(variation) {
    this.widthVariation = Math.max(0, Math.min(1, variation));

    if (this.brush && this.brush.widthVariation !== undefined) {
      this.brush.widthVariation = this.widthVariation;
    }

    return this.widthVariation;
  }

  /**
   * 设置丝带平滑度
   * @param {Number} smoothness 平滑度值(0-1)
   */
  setRibbonSmoothness(smoothness) {
    this.ribbonSmoothness = Math.max(0, Math.min(1, smoothness));

    if (this.brush && this.brush.ribbonSmoothness !== undefined) {
      this.brush.ribbonSmoothness = this.ribbonSmoothness;
    }

    return this.ribbonSmoothness;
  }

  /**
   * 启用/禁用渐变效果
   * @param {Boolean} enabled 是否启用
   */
  setGradient(enabled) {
    this.gradient = enabled;
    this.updateGradient();
    return this.gradient;
  }

  /**
   * 设置渐变颜色
   * @param {Array} colors 颜色数组
   */
  setGradientColors(colors) {
    if (Array.isArray(colors) && colors.length >= 2) {
      this.gradientColors = colors;
      this.updateGradient();
    }
    return this.gradientColors;
  }

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

    // 定义丝带笔刷特有属性
    const ribbonProperties = [
      {
        id: "ribbonWidth",
        name: this.t('Canvas.RibbonWidth'),
        type: "slider",
        defaultValue: this.ribbonWidth,
        min: 5,
        max: 100,
        step: 5,
        description: this.t('Canvas.RibbonWidthDescription'),
        category: this.t('Canvas.RibbonSettings'),
        order: 100,
      },
      {
        id: "widthVariation",
        name: this.t('Canvas.RibbonVariation'),
        type: "slider",
        defaultValue: this.widthVariation,
        min: 0,
        max: 1,
        step: 0.05,
        description: this.t('Canvas.RibbonVariationDescription'),
        category: this.t('Canvas.RibbonSettings'),
        order: 110,
      },
      {
        id: "ribbonSmoothness",
        name: this.t('Canvas.RibbonSmoothness'),
        type: "slider",
        defaultValue: this.ribbonSmoothness,
        min: 0,
        max: 1,
        step: 0.05,
        description: this.t('Canvas.RibbonSmoothnessDescription'),
        category: this.t('Canvas.RibbonSettings'),
        order: 120,
      },
      {
        id: "gradient",
        name: this.t('Canvas.RibbonGradient'),
        type: "checkbox",
        defaultValue: this.gradient,
        description: this.t('Canvas.RibbonGradientDescription'),
        category: this.t('Canvas.RibbonSettings'),
        order: 130,
      },
      {
        id: "gradientColor1",
        name: this.t('Canvas.RibbonGradientColor1'),
        type: "color",
        defaultValue: this.gradientColors[0] || "#000000",
        description: this.t('Canvas.RibbonGradientColor1Description'),
        category: this.t('Canvas.RibbonSettings'),
        order: 140,
        visibleWhen: { gradient: true },
      },
      {
        id: "gradientColor2",
        name: this.t('Canvas.RibbonGradientColor2'),
        type: "color",
        defaultValue: this.gradientColors[1] || "#555555",
        description: this.t('Canvas.RibbonGradientColor2Description'),
        category: this.t('Canvas.RibbonSettings'),
        order: 150,
        visibleWhen: { gradient: true },
      },
    ];

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

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

    // 处理丝带笔刷特有属性
    if (propId === "ribbonWidth") {
      this.setRibbonWidth(value);
      return true;
    } else if (propId === "widthVariation") {
      this.setWidthVariation(value);
      return true;
    } else if (propId === "ribbonSmoothness") {
      this.setRibbonSmoothness(value);
      return true;
    } else if (propId === "gradient") {
      this.setGradient(value);
      return true;
    } else if (propId === "gradientColor1") {
      const colors = [...this.gradientColors];
      colors[0] = value;
      this.setGradientColors(colors);
      return true;
    } else if (propId === "gradientColor2") {
      const colors = [...this.gradientColors];
      colors[1] = value;
      this.setGradientColors(colors);
      return true;
    }

    return false;
  }

  /**
   * 获取预览图
   * @returns {String} 预览图URL
   */
  getPreview() {
    return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNTU1Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHBhdGggZD0iTTIwIDUwQzMwIDMwIDUwIDMwIDYwIDUwQzcwIDcwIDgwIDcwIDkwIDUwIiBzdHJva2U9InVybCgjZ3JhZCkiIHN0cm9rZS13aWR0aD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==";
  }
}
