import Feature from '../../../src/ol/Feature.js';
import Fill from '../../../src/ol/style/Fill.js';
import Map from '../../../src/ol/Map.js';
import Point from '../../../src/ol/geom/Point.js';
import RegularShape from '../../../src/ol/style/RegularShape.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();
function createFeatures(stroke, fill, offSet = [0, 0]) {
  let feature;
  feature = new Feature({
    geometry: new Point([offSet[0], offSet[1]]),
  });
  // square with offset
  feature.setStyle(
    new Style({
      image: new RegularShape({
        fill: fill,
        stroke: stroke,
        points: 4,
        radius: 10,
        angle: Math.PI / 4,
        displacement: [-15, 15],
      }),
    })
  );
  vectorSource.addFeature(feature);

  feature = new Feature({
    geometry: new Point([8 + offSet[0], 15 + offSet[1]]),
  });
  // triangle
  feature.setStyle(
    new Style({
      image: new RegularShape({
        fill: fill,
        stroke: stroke,
        points: 3,
        radius: 10,
        rotation: Math.PI / 4,
        angle: 0,
      }),
    })
  );
  vectorSource.addFeature(feature);

  feature = new Feature({
    geometry: new Point([-10 + offSet[0], -8 + offSet[1]]),
  });
  // star
  feature.setStyle(
    new Style({
      image: new RegularShape({
        fill: fill,
        stroke: stroke,
        points: 5,
        radius: 10,
        radius2: 4,
        angle: 0,
      }),
    })
  );
  vectorSource.addFeature(feature);

  feature = new Feature({
    geometry: new Point([12 + offSet[0], -8 + offSet[1]]),
  });
  // cross
  feature.setStyle(
    new Style({
      image: new RegularShape({
        fill: fill,
        stroke: stroke,
        points: 4,
        radius: 10,
        radius2: 0,
        angle: 0,
      }),
    })
  );
  vectorSource.addFeature(feature);
}

createFeatures(new Stroke({width: 2}), new Fill({color: 'red'}));
createFeatures(
  new Stroke({
    lineDash: [10, 5],
  }),
  null,
  [50, 50]
);
createFeatures(
  new Stroke({
    lineDash: [10, 5],
    lineDashOffset: 5,
  }),
  null,
  [-50, -50]
);

createFeatures(new Stroke(), new Fill(), [50, -50]);

const vectorLayer = new VectorLayer({
  source: vectorSource,
});

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

render();