//import { HTTP } from "../lib/http";

import TileWMS from "ol/source/TileWMS.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import OSM from "ol/source/OSM";
import { Stroke, Style, Fill, Text } from "ol/style.js";
import VectorSource from "ol/source/Vector.js";

const MapStore = {
  namespaced: true,
  state: {
    layers: [
      {
        name: "Open Streetmap",
        data: new TileLayer({
          source: new OSM()
        }),
        isVisible: true
      },
      {
        name: "Inland ECDIS chart Danube",
        data: new TileLayer({
          source: new TileWMS({
            url: "https://demo.d4d-portal.info/wms",
            params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
          })
        }),
        isVisible: true
      },
      {
        name: "Fairways Dimensions",
        data: new VectorLayer({
          source: new VectorSource(),
          style: function(feature) {
            return [
              new Style({
                stroke: new Stroke({
                  color: "rgba(0, 0, 255, 1.0)",
                  width: 2
                })
              }),
              new Style({
                text: new Text({
                  font: 'bold 12px "Open Sans", "sans-serif"',
                  placement: "line",
                  fill: new Fill({
                    color: "black"
                  }),
                  text: "LOS: " + feature.get("level_of_service").toString()
                  //, zIndex: 10
                })
              })
            ];
          }
        }),
        isVisible: true
      },
      {
        name: "Waterway Area",
        data: new VectorLayer({
          source: new VectorSource(),
          style: new Style({
            stroke: new Stroke({
              color: "rgba(180, 140, 40, 1.0)",
              width: 1.5
            })
          })
        }),
        isVisible: true
      },
      {
        name: "Waterway Axis",
        data: new VectorLayer({
          source: new VectorSource(),
          style: new Style({
            stroke: new Stroke({
              color: "rgba(0, 0, 255, .5)",
              lineDash: [5, 5],
              width: 2
            })
          })
        }),
        isVisible: true
      },
      {
        name: "Distance marks",
        data: new VectorLayer({
          source: new VectorSource() /*,
            style: new Style({
            stroke: new Stroke({
              color: "rgba(0, 0, 255, 1.0)",
              width: 2
            })
          })
          */
        }),
        isVisible: false
      },
      {
        name: "Distance marks, Axis",
        data: new VectorLayer({
          source: new VectorSource(),
          style: new Style({
            stroke: new Stroke({
              color: "rgba(0, 255, 255, 1.0)",
              width: 3
            })
          })
        }),
        isVisible: true
      }
    ]
  },
  getters: {
    layers: state => {
      return state.layers;
    }
  },
  mutations: {
    toggleVisibility: (state, layer) => {
      state.layers[layer].isVisible = !state.layers[layer].isVisible;
      state.layers[layer].data.setVisible(state.layers[layer].isVisible);
    }
  }
};

export default MapStore;