import Feature from '../../../../src/ol/Feature.js';
import Fill from '../../../../src/ol/style/Fill.js';
import Map from '../../../../src/ol/Map.js';
import Polygon from '../../../../src/ol/geom/Polygon.js';
import Stroke from '../../../../src/ol/style/Stroke.js';
import Style from '../../../../src/ol/style/Style.js';
import VectorLayer from '../../../../src/ol/layer/Vector.js';
import VectorSource from '../../../../src/ol/source/Vector.js';
import View from '../../../../src/ol/View.js';

const vectorSource = new VectorSource();
let feature;

// rectangle with 1 hole
feature = new Feature({
  geometry: new Polygon([
    [
      [-102.5, 75],
      [-102.5, 115],
      [-42.5, 115],
      [-42.5, 75],
      [-102.5, 75],
    ],
    [
      [-82.5, 87],
      [-62.5, 87],
      [-62.5, 103],
      [-82.5, 103],
      [-82.5, 87],
    ],
  ]),
});

feature.setStyle(
  new Style({
    stroke: new Stroke({
      width: 4,
      color: '#000',
      lineJoin: 'round',
      lineCap: 'butt',
    }),
  })
);
vectorSource.addFeature(feature);

// rectangle with 2 holes
feature = new Feature({
  geometry: new Polygon([
    [
      [-117.5, 47.5],
      [-117.5, 97.5],
      [-47.5, 97.5],
      [-47.5, 47.5],
      [-117.5, 47.5],
    ],
    [
      [-113.5, 51.5],
      [-101.5, 51.5],
      [-101.5, 63.5],
      [-113.5, 63.5],
      [-113.5, 51.5],
    ],
    [
      [-67.5, 51.5],
      [-53.5, 51.5],
      [-53.5, 63.5],
      [-67.5, 63.5],
      [-67.5, 51.5],
    ],
  ]),
});

feature.setStyle(
  new Style({
    zIndex: -1,
    fill: new Fill({
      color: '#1A5E42',
    }),
    stroke: new Stroke({
      color: '#9696EB',
      width: 3,
    }),
  })
);
vectorSource.addFeature(feature);

// rectangle with 1 hole
feature = new Feature({
  geometry: new Polygon([
    [
      [-22.5, -5],
      [-22.5, 35],
      [37.5, 35],
      [37.5, -5],
      [-22.5, -5],
    ],
    [
      [-2.5, 7],
      [17.5, 7],
      [17.5, 23],
      [-2.5, 23],
      [-2.5, 7],
    ],
  ]),
});
feature.setStyle(
  new Style({
    stroke: new Stroke({
      width: 3,
      color: '#777',
      lineDash: [2, 4],
    }),
  })
);
vectorSource.addFeature(feature);

// rectangle with 2 holes
feature = new Feature({
  geometry: new Polygon([
    [
      [-37.5, -32.5],
      [-37.5, 17.5],
      [32.5, 17.5],
      [32.5, -32.5],
      [-37.5, -32.5],
    ],
    [
      [-33.5, -28.5],
      [-21.5, -28.5],
      [-21.5, -16.5],
      [-33.5, -16.5],
      [-33.5, -28.5],
    ],
    [
      [12.5, -28.5],
      [26.5, -28.5],
      [26.5, -16.5],
      [12.5, -16.5],
      [12.5, -28.5],
    ],
  ]),
});
feature.setStyle(
  new Style({
    fill: new Fill({
      color: 'rgba(255, 0, 0, 0.85)',
    }),
  })
);
vectorSource.addFeature(feature);

new Map({
  pixelRatio: 1,
  layers: [
    new VectorLayer({
      source: vectorSource,
    }),
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    resolution: 1,
  }),
});

render();