import Tools from "../../Tools";

function StreamWall1() {
  //动态墙材质
  function PolylineTrailLinkMaterialProperty(options = {}) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = options.color;
    this.duration = options.duration;
    this.fltr = options.fltr;
    this.image = options.image;
    this._time = (new Date()).getTime();
  }

  Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
    isConstant: {
      get: function () {
        return false;
      }
    },
    definitionChanged: {
      get: function () {
        return this._definitionChanged;
      }
    },
    repeat: Cesium.createPropertyDescriptor('repeat'),
    color: Cesium.createPropertyDescriptor('color')
  });
  PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
    return 'PolylineTrailLink';
  };
  PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
    if (!Cesium.defined(result)) {
      result = {};
    }
    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.BROWN, result.color);
    if (this.image) {
      result.image = this.image;
    } else {
      result.image = Cesium.Material.PolylineTrailLinkImage
    }

    if (this.duration) {
      result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
    }
    if (this.fltr === false) {
      result.fltr = this.fltr;
    }
    else {
      result.fltr = true;
    }
    return result;
  };
  PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
    return this === other ||
      (other instanceof PolylineTrailLinkMaterialProperty
        && Cesium.Property.equals(this._color, other._color))
  };
  Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
  Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
  Cesium.Material.PolylineTrailLinkImage = create_gradient();
  Cesium.Material.PolylineTrailLinkSource =
    "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
      {\n\
      czm_material material =czm_getDefaultMaterial(materialInput);\n\
      vec2 st = materialInput.st;\n\
      vec4 colorImage = texture(image,vec2(fract(st.t - time), st.t));\n\
      vec4 fragColor;\n\
      fragColor.rgb = color.rgb / 1.0;\n\
      fragColor = czm_gammaCorrect(fragColor);\n\
      material.alpha = colorImage.a * color.a;\n\
      material.diffuse = color.rgb/20.0;\n\
      material.emission = fragColor.rgb;\n\
      return material;\n\
      }";
  Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
    fabric: {
      type: Cesium.Material.PolylineTrailLinkType,
      uniforms: {
        // color: new Cesium.Color(1.0, 1.0, 1.0, 1),
        color: new Cesium.Color(1.0, 1.0, 1.0, 1),
        image: Cesium.Material.PolylineTrailLinkImage,
        time: 0
      },
      source: Cesium.Material.PolylineTrailLinkSource
    },
    translucent: function (material) {
      return true;
    }
  });

}


function StreamWall2() {
  let tools = new Tools()
  let _that = this
  if (typeof Cesium !== 'undefined') (function (Cesium) {
    /**
     * 自定义材质线Property 适用于entity和primitive材质
     * @param {object} options
     * @param source {string} glsl的shader代码
     * @param options.image {string} 图片地址
     */
    function CustomMaterialSource(options = {}, source) {

      var Color = Cesium.Color,
        defaultValue = Cesium.defaultValue,
        defineProperties = Object.defineProperties,
        Event = Cesium.Event,
        createPropertyDescriptor = Cesium.createPropertyDescriptor,
        Property = Cesium.Property,
        Material = Cesium.Material,
        MaterialType = options.MaterialType || 'wallType' + parseInt(Math.random() * 1000);

      let uniforms = {
        color: new Cesium.Color(1.0, 1.0, 1.0, 1),
        image: options.image || tools.getSourceRootPath() + "/img/material/arrow.png",
        time: options.time || 0,
        repeat: new Cesium.Cartesian2(100.0, 100.0),
        fltr: options.fltr || options.fltr === false ? options.fltr : true,
        is2D: options.is2D ? true : false,
        isTranslucent: options.isTranslucent || options.isTranslucent === false ? options.isTranslucent : true,
      }

      this.code = ``
      if (options.repeats) {
        let repeats = Cesium.Property.getValueOrDefault(options.repeats);
        for (let i = 0; i < repeats.length; i++) {
          if (i !== 0) {
            this.code += `else `
          }
          uniforms['repeat' + (i + 1)] = new Cesium.Cartesian2(repeats[i][1] * (repeats.length + ((repeats.length - 1) * 3)), repeats[i][2])
          this.code += `if(materialInput.st.s < ${repeats[i][0]}) {
            repeat0 = repeat${i + 1};
          }`
        }
      }



      // 创建自定义动态材质对象
      function PolylineCustomMaterialProperty(options = {}) {

        options = defaultValue(options, defaultValue.EMPTY_OBJECT);
        // 定义内置属性
        this._definitionChanged = new Event();
        this._color = undefined;
        this._colorSubscription = undefined;
        this._repeat = undefined;
        this._repeats = undefined;
        this._repeatSubscription = undefined;
        this.image = options.image;
        this.is2D = options.is2D ? true : false;
        this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(4,253,231,0.87)");
        this.repeat = options.repeat;
        this.repeats = options.repeats;
        this.duration = (options.duration || options.duration === 0) ? options.duration : 1000
        this.fltr = options.fltr || options.fltr === false ? options.fltr : true
        this._time = new Date().getTime();

      }

      // 定义材质对象默认属性
      defineProperties(PolylineCustomMaterialProperty.prototype, {
        isvarant: {
          get: function () {
            return false;
          }
        },
        definitionChanged: {
          get: function () {
            return this._definitionChanged;
          }
        },
        repeat: Cesium.createPropertyDescriptor('repeat'),
        color: createPropertyDescriptor('color')
      });
      // 材质对象需要有type函数 value函数 equals函数
      PolylineCustomMaterialProperty.prototype.getType = function (time) {
        return MaterialType;
      };
      PolylineCustomMaterialProperty.prototype.getValue = function (time, result) {
        if (!Cesium.defined(result)) {
          result = {};
        }
        result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
        result.time = this.duration ? (Cesium.getTimestamp() % this.duration) / this.duration : 0;
        result.image = this.image;
        result.is2D = this.is2D ? true : false;
        if (this.repeat) {
          result.repeat = Cesium.Property.getValueOrDefault(this.repeat);
        }
        if (this.repeats) {
          let repeats = Cesium.Property.getValueOrDefault(this.repeats);
          for (let i = 0; i < repeats.length; i++) {
            result['repeat' + (i + 1)] = new Cesium.Cartesian2(repeats[i][1] * (repeats.length + ((repeats.length - 1) * 3)), repeats[i][2])
          }
        }

        return result;
      };
      PolylineCustomMaterialProperty.prototype.equals = function (other) {
        return this === other || //
          (other instanceof PolylineCustomMaterialProperty &&
            Property.equals(this._color, other._color)) &&
          Property.equals(this.repeat, other._repeat) &&
          Property.equals(this.repeats, other._repeats)
      };
      // let code2 = 'material.diffuse = color.rgb*1.0;'
      // if (uniforms.is2D) {
      //   code2 = `
      //     material.diffuse = color.rgb*0.0;
      //     material.emission = color.rgb * 1.0;
      //   `
      // }
      // console.log(code2, uniforms.is2D)
      // 将定义的材质对象添加到cesium的材质队列中
      Material._materialCache.addMaterial(MaterialType, {
        fabric: {
          type: MaterialType,
          uniforms: uniforms,
          // 动态材质shader
          source: `czm_material czm_getMaterial(czm_materialInput materialInput)
          {
              czm_material material = czm_getDefaultMaterial(materialInput);
               // vec2 repeat1 = materialInput.st.s < 0.5 ? vec2(100.0, 1.0) : vec2(200.0, 1.0);
               vec2 repeat0 = repeat;
              `+ this.code + `;
              vec2 st = repeat0 * materialInput.st;
              float f = -1.0;
              if(fltr==true) { f = 1.0; } 
              vec4 colorImage = texture(image, vec2(fract(st.s - (time * f)), st.t));
              if(isTranslucent) {
                material.alpha = colorImage.a * color.a;
              }
              else {
                material.alpha = 1.0;
              }
              material.diffuse = colorImage.rgb * color.rgb*0.0;
              material.emission = colorImage.rgb * color.rgb * 1.0;
              return material;
          }`,
          components: {
            specular: 10.0,
            diffuse: "vec3(1.0)"
          },
        },
        // 透明
        translucent: function (material) {
          return material.uniforms.isTranslucent
        }
      })
      return new PolylineCustomMaterialProperty(options);
    }

    Cesium.CustomMaterialSource = CustomMaterialSource;
  })(Cesium);

}

function create_gradient(color = "#fa2020") {
  let width = 512
  let height = 32
  let canvas = new fabric.Canvas('canvas', {
    width,
    height
  });
  let rect1 = new fabric.Rect({
    width,
    height,
  });
  // 线性渐变
  let gradient = new fabric.Gradient({
    type: 'linear', // linear or radial
    gradientUnits: 'pixels', // pixels or pencentage 像素 或者 百分比
    coords: { x1: 0, y1: 0, x2: width, y2: 0 }, // 至少2个坐标对（x1，y1和x2，y2）将定义渐变在对象上的扩展方式
    colorStops: [ // 定义渐变颜色的数组
      { offset: 0.01, color: "rgba(246,241,241,0)" },
      { offset: 1, color }
    ]
  })
  rect1.set('fill', gradient)
  canvas.add(rect1)
  return canvas.toDataURL()
}

export { StreamWall1, StreamWall2, create_gradient }