import Pulser from '../widget/Pulser';
import DataUtils from '../utils/DataUtils';
import VerifyUtils from '../utils/VerifyUtils';
import IconProvider from '../geog/IconProvider';
import SimpleMarkerLayer from './SimpleMarkerLayer';

/**
 * 定义脉冲点位图层
 * @alias PulserLayer
 *
 * @summary <用于预警、报警点位加载>
 */
export default class PulserLayer {
  /**
   * 构造函数
   * @param {Object} options -图层选项
   */
  constructor(options) {
    // 数据源是否存在
    this._hasSource = true;

    /**
     * 地图对象
     * @type {Object}
     */
    this._map = options.map;

    /**
     * 最小缩放层级
     * @type {Number}
     */
    this._minzoom = DataUtils.default(options.minzoom, 10);

    /**
     * 过滤条件数组
     * @type {Array}
     */
    this._filter = DataUtils.default(options.filter, undefined);

    /**
     * 图标ID
     * @type {String|Object}
     */
    this._icon = DataUtils.default(options.icon, 'busi_alarm');

    /**
     * 脉冲图标
     * @type {String|Object}
     */
    this._pulserIcon = DataUtils.default(options.pulserIcon, this._icon + '-pulsing');

    /**
     * 内圆颜色
     * @type {Array}
     */
    this._innerColor = DataUtils.default(options.innerColor, [255, 25, 25]);

    /**
     * 外圆颜色
     * @type {Array}
     */
    this._outerColor = DataUtils.default(options.outerColor, [255, 50, 50]);

    /**
     * 外圆半径
     * @type {Number}
     */
    this._radius = DataUtils.default(options.radius, 30);

    /**
     * 数据源ID
     * @type {String}
     */
    this._sourceId = DataUtils.default(options.sourceId, 'marker_pulser');

    /**
     * 图层ID
     * @type {String}
     */
    this._layerId = DataUtils.default(options.layerId, this._sourceId);
    // 脉冲图层ID
    this._pulserLayerId = this._layerId + '-pulser';

    // 图层对象
    this._markerLayer = null;
    this._pulserLayer = null;
    // 初始化图层
    this._initLayers();
  }

  /** 公有方法 **/
  /**
   * 设置数据
   * @param {Object|Array} data -GeoJson要素/要素集/数组
   */
  setData(data = null) {
    // 加载图层
    if (!this.hasLayer()) {
      this.loadLayer();
    }

    // 设置点位数据
    this._markerLayer.setData(data);
    // 设置点脉冲数据
    this._pulserLayer.setData(data);
  }

  /**
   * 设置过滤器
   * @param {Array} filter -过滤器
   */
  setFilter(filter) {
    this._markerLayer.setFilter(filter);
    this._pulserLayer.setFilter(filter);
  }

  /**
   * 加载图层
   */
  loadLayer() {
    if (this.hasLayer()) return;

    if (VerifyUtils.isString(this._pulserIcon)) {
      // 添加脉冲图标
      this._addPulserIcon();
    }

    // 加载点脉冲图层
    this._pulserLayer.loadLayer();
    // 加载点位图层
    this._markerLayer.loadLayer();
  }

  /**
   * 显示/隐藏图层
   * @param {Boolean} show -是否显示
   */
  showLayer(show) {
    this._markerLayer.showLayer(show);
    this._pulserLayer.showLayer(show);
  }

  /**
   * 判断图层是否已加载
   *
   * @returns {Boolean}
   */
  hasLayer() {
    return (
      this._markerLayer.hasLayer() &&
      this._pulserLayer.hasLayer()
    );
  }

  /**
   * 移除图层
   */
  removeLayer() {
    this._pulserLayer.removeLayer();
    this._markerLayer.removeLayer();
    // 移除图层
    this._markerLayer.removeSource();

    if (VerifyUtils.isString(this._pulserIcon)) {
      // 移除图标
      IconProvider.removeIcon(this._map, this._pulserIcon);
    }
  }

  /**
   * 绑定单击事件
   * @param {Function} event -事件函数
   */
  onClick(event) {
    this._markerLayer.onClick(event);
  }

  /**
   * 绑定事件
   * @param {String} name -事件名称
   * @param {Function} event -事件函数
   */
  onEvent(name, event) {
    this._markerLayer.onEvent(name, event);
  }

  /** 私有方法 **/
  /**
   * 初始化图层
   */
  _initLayers() {
    const map = this._map;
    const minZoom = this._minzoom;

    // 点位图层
    this._markerLayer = new SimpleMarkerLayer({
      map: map,
      minzoom: minZoom,
      icon: this._icon,
      filter: this._filter,
      sourceId: this._sourceId,
      layerId: this._layerId
    });

    // 扩散圆图层
    this._pulserLayer = new SimpleMarkerLayer({
      map: map,
      minzoom: minZoom,
      icon: this._pulserIcon,
      opacity: 0.75,
      filter: this._filter,
      sourceId: this._sourceId,
      layerId: this._pulserLayerId
    });
  }

  /**
   * 添加脉冲图标
   */
  _addPulserIcon() {
    const map = this._map;

    if (!IconProvider.hasIcon(map, this._pulserIcon)) {
      let pulsing = new Pulser({
        map: map,
        size: this._radius * 2.0,
        innerColor: {
          r: this._innerColor[0],
          g: this._innerColor[1],
          b: this._innerColor[2]
        },
        outerColor: {
          r: this._outerColor[0],
          g: this._outerColor[1],
          b: this._outerColor[2]
        }
      });

      map.addImage(this._pulserIcon, pulsing, {
        pixelRatio: 1
      });
    }
  }
}
