import rasterLayer from "../RasterLayer";
import layerEvents from "../../../lib/layerEvents";
import igsOptions from "./igsOptions";

export default {
  name: "IgsWmsLayer",
  mixins: [rasterLayer],
  props: {
    ...igsOptions,
    serverType: {
      type: String
      // require: true
    },
    serverName: {
      type: String
      // require: true
    },
    layers: {
      type: Array
      // require: true
    },
    version: {
      type: String,
      default: "1.1.1"
    },
    crs: {
      type: String,
      default: "EPSG:4326"
    },
    wmtsStyle: {
      type: String,
      default: ""
    },
    format: {
      type: String,
      default: "image/png"
    },
    token: {
      type: String,
      default: null
    }
  },
  watch: {
    layers() {
      if (this.initial) return;
      this.changelayers();
    }
  },
  methods: {
    changelayers() {
      this.$_init();
      this.mapSource.tiles = [this._url];
    },
    $_init() {
      if (!this.layers) {
        return;
      }
      let baseUrl = "";
      if (this.url) {
        if (this.url.indexOf("?") > -1) {
          baseUrl = this.url.split("?")[0];
        } else {
          baseUrl = this.url;
        }
      } else {
        let domain = this.domain;
        if (!domain) {
          domain = this.protocol + "://" + this.ip + ":" + this.port;
        }
        baseUrl =
          domain +
          "/igs/rest/ogc/" +
          this.serverType +
          "/" +
          this.serverName +
          "/WMSServer";
      }
      baseUrl += "?service=WMS&request=GetMap";
      const partUrl = this.$_initAllRequestParams().join("&");
      this._url = encodeURI(baseUrl + "&" + partUrl) + "&bbox={bbox}";
    },
    $_initAllRequestParams() {
      let params = [];
      params.push("version=" + this.version);
      params.push("layers=" + this.layers);
      params.push("format=" + this.format);
      params.push("width=" + this.tileSize);
      params.push("height=" + this.tileSize);
      if (this.version === "1.1.1") {
        params.push("srs=" + this.crs);
      } else if (this.version === "1.3.0") {
        params.push("crs=" + this.crs);
      }
      params.push("styles=" + this.wmtsStyle);
      if (this.token) {
        params.push("token=" + this.token);
      }
      params.push("transparent=true");
      return params;
    },
    $_deferredMount() {
      this.$_init();
      let source = {
        type: "raster",
        tiles: [this._url],
        tileSize: this.tileSize,
        mapgisOffset: this.zoomOffset,
        ...this.source
      };

      this.map.on("dataloading", this.$_watchSourceLoading);
      try {
        this.map.addSource(this.sourceId, source);
      } catch (err) {
        if (this.replaceSource) {
          this.map.removeSource(this.sourceId);
          this.map.addSource(this.sourceId, source);
        }
      }
      this.$_addLayer();
      this.$_bindLayerEvents(layerEvents);
      this.map.off("dataloading", this.$_watchSourceLoading);
      this.initial = false;
    }
  }
};
