import { Icon, Stroke, Style, Fill, Text, Circle } from "ol/style";
import Point from "ol/geom/Point";
import { getCenter } from "ol/extent";

const styles = {
  blue1: new Style({
    stroke: new Stroke({
      color: "rgba(0, 0, 255, 0.8)",
      lineDash: [2, 4],
      lineCap: "round",
      width: 2
    }),
    fill: new Fill({
      color: "rgba(240, 230, 0, 0.2)"
    })
  }),
  blue2: new Style({
    stroke: new Stroke({
      color: "rgba(0, 0, 255, 0.9)",
      lineDash: [3, 6],
      lineCap: "round",
      width: 2
    }),
    fill: new Fill({
      color: "rgba(240, 230, 0, 0.1)"
    })
  }),
  blue3: new Style({
    stroke: new Stroke({
      color: "rgba(0, 0, 255, 1.0)",
      width: 2
    }),
    fill: new Fill({
      color: "rgba(255, 255, 255, 0.4)"
    })
  }),
  yellow1: new Style({
    stroke: new Stroke({
      color: "rgba(230, 230, 10, .8)",
      width: 4
    }),
    fill: new Fill({
      color: "rgba(230, 230, 10, .3)"
    })
  }),
  yellow2: new Style({
    stroke: new Stroke({
      color: "rgba(250, 200, 0, .8)",
      width: 2
    }),
    fill: new Fill({
      color: "rgba(250, 200, 10, .3)"
    })
  }),
  yellow3: new Style({
    stroke: new Stroke({
      color: "rgba(250, 240, 10, .9)",
      width: 5
    }),
    fill: new Fill({
      color: "rgba(250, 240, 0, .7)"
    })
  }),
  orange1: new Style({
    stroke: new Stroke({
      color: "rgba(255, 150, 10, .8)",
      width: 2
    }),
    fill: new Fill({
      color: "rgba(255, 150, 0, .3)"
    })
  }),
  orange2: new Style({
    stroke: new Stroke({
      color: "rgba(255, 166, 10, .9)",
      width: 5
    }),
    fill: new Fill({
      color: "rgba(255, 166, 0, .7)"
    })
  }),
  red1: new Style({
    stroke: new Stroke({
      color: "rgba(255, 0, 0, 1)",
      width: 4
    })
  }),
  circleBlue: new Style({
    image: new Circle({
      radius: 5,
      fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }),
      stroke: new Stroke({ color: "blue", width: 1 })
    })
  }),
  textFW1: new Style({
    text: new Text({
      font: 'bold 12px "Open Sans", "sans-serif"',
      placement: "line",
      fill: new Fill({
        color: "black"
      }),
      text: "LOS: 1"
      //, zIndex: 10
    })
  }),
  textFW2: new Style({
    text: new Text({
      font: 'bold 12px "Open Sans", "sans-serif"',
      placement: "line",
      fill: new Fill({
        color: "black"
      }),
      text: "LOS: 2"
      //, zIndex: 10
    })
  }),
  textFW3: new Style({
    text: new Text({
      font: 'bold 12px "Open Sans", "sans-serif"',
      placement: "line",
      fill: new Fill({
        color: "black"
      }),
      text: "LOS: 3"
      //, zIndex: 10
    })
  })
};

export default {
  stretches(feature) {
    let style = styles.yellow2;
    if (feature.get("highlighted")) {
      style = styles.yellow3;
    }
    return style;
  },
  sections(feature) {
    let style = styles.orange1;
    if (feature.get("highlighted")) {
      style = styles.orange2;
    }
    return style;
  },
  fwd1() {
    return [styles.blue1, styles.textFW1];
  },
  fwd2() {
    return [styles.blue2, styles.textFW2];
  },
  fwd3() {
    return [styles.blue3, styles.textFW3];
  },
  bottleneck() {
    return styles.yellow1;
  },
  bottleneckStatus(feature, resolution, isLegend) {
    let s = [];
    if ((feature.get("fa_critical") && resolution > 15) || isLegend) {
      let bnCenter = getCenter(feature.getGeometry().getExtent());
      s.push(
        new Style({
          geometry: new Point(bnCenter),
          image: new Icon({
            src: require("@/assets/marker-bottleneck-critical.png"),
            anchor: [0.5, 0.5],
            scale: isLegend ? 0.5 : 1
          })
        })
      );
    }
    if (feature.get("fa_critical") && !isLegend) {
      s.push(styles.red1);
    }
    return s;
  },
  bottleneckFairwayAvailability(feature, resolution, isLegend) {
    let s = [];
    if (isLegend) {
      s.push(
        new Style({
          image: new Icon({
            src: require("@/assets/fa-diagram.png"),
            anchor: [0.5, 0.5],
            scale: 1
          })
        })
      );
    }
    if (
      feature.get("fa_critical") &&
      feature.get("fa_data") &&
      resolution > 15
    ) {
      let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`;
      let lnwl = `<rect x='2' y='22' width='10' height='60' stroke-width='0' fill='aqua'/>`;
      let range1 = `<rect x='12' y='2' width='18' height='25' stroke-width='0' fill='hotpink'/>`;
      let range2 = `<rect x='12' y='27' width='18' height='5' stroke-width='0' fill='darksalmon'/>`;
      let range3 = `<rect x='12' y='32' width='18' height='50' stroke-width='0' fill='blue'/>`;
      let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='84'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`;
      let bnCenter = getCenter(feature.getGeometry().getExtent());
      s.push(
        new Style({
          geometry: new Point(bnCenter),
          image: new Icon({
            src: svg,
            anchor: [1.2, 1.2]
          })
        })
      );
    }
    return s;
  },
  dma(feature, resolution) {
    if (resolution < 10) {
      var s = styles.circleBlue;
      if (resolution < 6) {
        s.setText(
          new Text({
            offsetY: 12,
            font: '10px "Open Sans", "sans-serif"',
            fill: new Fill({
              color: "black"
            }),
            text: (feature.get("hectometre") / 10).toString()
          })
        );
      }
      return s;
    }
    return [];
  },
  gauge(feature, resolution, isLegend) {
    let waterlevel = feature.get("gm_waterlevel");
    let text = feature.get("objname");
    let iconColor = "white";
    if (waterlevel) {
      text += "\n(" + waterlevel + " cm)";
      let refWaterlevels = JSON.parse(feature.get("reference_water_levels"));
      if (waterlevel < refWaterlevels.LDC) iconColor = "brown";
      if (waterlevel > refWaterlevels.LDC && waterlevel < refWaterlevels.HDC)
        iconColor = "blue";
      if (waterlevel > refWaterlevels.HDC) iconColor = "red";
    }

    return [
      new Style({
        image: new Icon({
          src: require("@/assets/marker-gauge-" + iconColor + ".png"),
          anchor: [0.5, isLegend ? 0.5 : 1],
          scale: isLegend ? 0.5 : 1
        }),
        text: new Text({
          font: '10px "Open Sans", "sans-serif"',
          offsetY: 15,
          fill: new Fill({
            color: "black"
          }),
          backgroundFill: new Fill({
            color: "rgba(255, 255, 255, 0.7)"
          }),
          padding: [2, 2, 2, 2],
          text
        })
      })
    ];
  }
};