// import { createSelector } from "redux-bundler";
// import { convertArea, convertDistance } from "./measure-utils";
// import { getArea, getDistance } from "ol/sphere";
// import { getLayer } from "../../openlayers-utils/layer-utilities";
// import createInteraction from "../../openlayers-utils/interaction-creator";
// import { Style, Fill, Stroke, Circle } from "ol/style";
// import Point from "ol/geom/Point";
// import _ from "lodash";

// // SET UP DISTANCE STUFF
// const distanceLayer = getLayer({
//   serviceType: "LocalVector",
//   visible: true,
//   geometryType: "LineString",
//   style: function (feature) {
//     const geom = feature.getGeometry();
//     const styles = [
//       new Style({
//         stroke: new Stroke({
//           color: "rgba(255, 255, 255, 0.9)",
//           width: 4,
//         }),
//       }),
//       new Style({
//         stroke: new Stroke({
//           color: "rgba(0, 0, 0, 0.8)",
//           lineDash: [4, 4],
//           width: 2,
//         }),
//       }),
//     ];
//     const start = geom.getFirstCoordinate();
//     styles.push(
//       new Style({
//         geometry: new Point(start),
//         image: new Circle({
//           radius: 4,
//           stroke: new Stroke({
//             color: "rgba(0, 0, 0, 0.8)",
//             width: 2,
//           }),
//           fill: new Fill({
//             color: "rgba(255, 255, 255, 1)",
//           }),
//         }),
//       })
//     );
//     const end = geom.getLastCoordinate();
//     styles.push(
//       new Style({
//         geometry: new Point(end),
//         image: new Circle({
//           radius: 4,
//           stroke: new Stroke({
//             color: "rgba(0, 0, 0, 0.8)",
//             width: 2,
//           }),
//           fill: new Fill({
//             color: "rgba(255, 255, 255, 1)",
//           }),
//         }),
//       })
//     );
//     return styles;
//   },
// });

// const drawDistance = createInteraction({
//   interaction: "draw",
//   source: distanceLayer.getSource(),
//   type: "LineString",
// });

// const modifyDistance = createInteraction({
//   interaction: "modify",
//   source: distanceLayer.getSource(),
// });

// // SET UP AREA STUFF
// const areaLayer = getLayer({
//   serviceType: "LocalVector",
//   visible: true,
//   geometryType: "Polygon",
//   style: [
//     new Style({
//       stroke: new Stroke({
//         color: "rgba(255, 255, 255, 0.9)",
//         width: 4,
//       }),
//       fill: new Fill({
//         color: "rgba(255, 255, 255, 0.2)",
//       }),
//     }),
//     new Style({
//       stroke: new Stroke({
//         color: "rgba(0, 0, 0, 0.8)",
//         lineDash: [4, 4],
//         width: 2,
//       }),
//     }),
//   ],
// });

// const drawArea = createInteraction({
//   interaction: "draw",
//   source: areaLayer.getSource(),
//   type: "Polygon",
// });

// const modifyArea = createInteraction({
//   interaction: "modify",
//   source: areaLayer.getSource(),
// });

// // START BUNDLE
// export default {
//   name: "measure",

//   getReducer() {
//     const initialData = {
//       active: false,
//       type: null,
//       geom: null,
//       areaUnits: "ft/mi",
//       distanceUnits: "ft/mi",
//     };
//     return (state = initialData, { type, payload }) => {
//       switch (type) {
//         case "MEASURE_STARTED":
//         case "MEASURE_DRAW_STARTED":
//         case "MEASURE_STOPPED":
//         case "MEASURE_UNITS_UPDATED":
//           return Object.assign({}, state, payload);
//         default:
//           return state;
//       }
//     };
//   },

//   doStartMeasure: (type) => ({ dispatch, store }) => {
//     store.doSetCursor("crosshair");
//     if (type === "distance") {
//       store.doStartMeasureDistance();
//     } else {
//       store.doStartMeasureArea();
//     }
//     dispatch({
//       type: "MEASURE_STARTED",
//       payload: { type: type, active: true },
//     });
//   },

//   doStartMeasureDistance: () => ({ dispatch, store }) => {
//     const map = store.selectMap();
//     store.doStopMeasureArea();
//     map.addInteraction(drawDistance);
//     map.addInteraction(modifyDistance);
//     drawDistance.on("drawstart", store.doStartMeasureDraw);
//     drawDistance.on("drawend", store.doStopMeasureDraw);
//     map.addLayer(distanceLayer);
//   },

//   doStartMeasureArea: () => ({ dispatch, store }) => {
//     const map = store.selectMap();
//     store.doStopMeasureDistance();
//     map.addInteraction(drawArea);
//     map.addInteraction(modifyArea);
//     drawArea.on("drawstart", store.doStartMeasureDraw);
//     drawArea.on("drawend", store.doStopMeasureDraw);
//     map.addLayer(areaLayer);
//   },

//   doStartMeasureDraw: (e) => ({ dispatch, store }) => {
//     store.doClearMeasureFeatures();
//     const geom = e.feature.getGeometry();
//     if (geom) geom.on("change", _.throttle(store.doUpdateDrawing, 200));
//     dispatch({ type: "MEASURE_DRAW_STARTED", payload: { geom: geom } });
//   },

//   doStopMeasureDraw: (e) => ({ dispatch, store }) => {
//     dispatch({ type: "MEASURE_DRAW_STOPPED" });
//   },

//   doUpdateDrawing: (e) => ({ dispatch, store }) => {
//     dispatch({ type: "MEASURE_DRAW_UPDATED" });
//   },

//   doPauseMeasure: () => ({ dispatch, store }) => {
//     store.doSetCursor();
//     const map = store.selectMap();
//     const type = store.selectMeasureType();
//     const draw = type === "distance" ? drawDistance : drawArea;
//     const modify = type === "distance" ? modifyDistance : modifyArea;

//     map.removeInteraction(draw);
//     map.removeInteraction(modify);
//   },

//   doClearMeasureFeatures: () => ({ dispatch, store }) => {
//     distanceLayer.getSource().clear();
//     areaLayer.getSource().clear();
//   },

//   doStopMeasure: () => ({ dispatch, store }) => {
//     store.doSetCursor();
//     store.doStopMeasureArea();
//     store.doStopMeasureDistance();
//     dispatch({
//       type: "MEASURE_STOPPED",
//       payload: { active: false, type: null, geom: null },
//     });
//   },

//   doStopMeasureDistance: () => ({ dispatch, store }) => {
//     const map = store.selectMap();
//     map.removeInteraction(drawDistance);
//     map.removeInteraction(modifyDistance);
//     map.removeLayer(distanceLayer);
//     distanceLayer.getSource().clear();
//   },

//   doStopMeasureArea: () => ({ dispatch, store }) => {
//     const map = store.selectMap();
//     map.removeInteraction(drawArea);
//     map.removeInteraction(modifyArea);
//     map.removeLayer(areaLayer);
//     areaLayer.getSource().clear();
//   },

//   doUpdateMeasureUnits: ({ areaUnits, distanceUnits }) => ({ dispatch }) => {
//     dispatch({
//       type: "MEASURE_UNITS_UPDATED",
//       payload: { areaUnits, distanceUnits },
//     });
//   },

//   selectMeasureType: (state) => {
//     return state.measure.type;
//   },

//   selectMeasureAreaUnits: (state) => {
//     return state.measure.areaUnits;
//   },

//   selectMeasureDistanceUnits: (state) => {
//     return state.measure.distanceUnits;
//   },

//   selectMeasureGeom: (state) => {
//     return state.measure.geom;
//   },

//   selectMeasureOutput: createSelector(
//     "selectMeasureGeom",
//     "selectMeasureType",
//     "selectMapProjection",
//     "selectMeasureAreaUnits",
//     "selectMeasureDistanceUnits",
//     "selectAppTime",
//     (geom, type, mapProjection, areaUnits, distanceUnits, appTime) => {
//       if (!geom) return { output: "...", value: 0 };
//       const projected = geom.clone().transform(mapProjection, "EPSG:4326");
//       if (type === "distance") {
//         const coords = projected.getCoordinates();
//         let length = 0;
//         for (var i = 0; i < coords.length - 1; i++) {
//           length += getDistance(coords[i], coords[i + 1]);
//         }
//         return convertDistance(length, distanceUnits);
//       } else {
//         const coords = projected.getLinearRing(0).getCoordinates();
//         if (coords.length > 3)
//           return convertArea(Math.abs(getArea(geom)), areaUnits);
//         return { output: "...", value: 0 };
//       }
//     }
//   ),

//   selectMeasureSettings: (state) => {
//     return state.measure;
//   },
// };
