import { FeatureLike } from "ol/Feature";
import { Text } from "ol/style";
import Fill from "ol/style/Fill";
import { FlatStyleLike } from "ol/style/flat";
import Stroke from "ol/style/Stroke";
import Style from "ol/style/Style";
import { calculateCenter } from "./mapUtils";
import CircleStyle from "ol/style/Circle";
import { MultiPoint, Point } from "ol/geom";

export const highlightStyleYellow = new Style({
    stroke: new Stroke({
        color: 'blue',
        width: 3,
    }),
    fill: new Fill({
        color: 'rgba(0, 0, 255, 0.5)',
    }),
});

export const highlightStyleRed = new Style({
    stroke: new Stroke({
        color: 'red',
        width: 3,
    }),
    fill: new Fill({
        color: 'rgba(255, 255, 0, 0.3)',
    }),
});

export function overlayStyle(feature: FeatureLike) {
    const styles = [new Style({
        geometry: function (feature) {
            const modifyGeometry = feature.get('modifyGeometry');
            return modifyGeometry ? modifyGeometry.geometry : feature.getGeometry();
        },
        fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)',
        }),
        stroke: new Stroke({
            color: '#ffcc33',
            width: 2,
        }),
        image: new CircleStyle({
            radius: 7,
            fill: new Fill({
                color: '#ffcc33',
            }),
        }),
    })]
    const modifyGeometry = feature.get('modifyGeometry')
    const geometry = modifyGeometry ? modifyGeometry.geometry : feature.getGeometry()
    const result = calculateCenter(geometry)
    const center = result.center
    if (center) {
        styles.push(
            new Style({
                geometry: new Point(center),
                image: new CircleStyle({
                    radius: 4,
                    fill: new Fill({
                        color: '#ff3333'
                    })
                })
            })
        )
        const coordinates = result.coordinates
        if (coordinates) {
            const minRadius = result.minRadius
            const sqDistances = result.sqDistances
            const rsq = minRadius * minRadius
            if (Array.isArray(sqDistances)) {
                const points = coordinates.filter(function (_coordinate, index) {
                    return sqDistances[index] > rsq
                })
                styles.push(
                    new Style({
                        geometry: new MultiPoint(points),
                        image: new CircleStyle({
                            radius: 4,
                            fill: new Fill({
                                color: '#33cc33'
                            })
                        })
                    })
                )
            }
        }
    }
    return styles
}

const figureStyle = new Style({
    fill: new Fill({
        color: 'rgba(255,255,255,0.4)'
    }),
    stroke: new Stroke({
        color: 'black',
        width: 1.25
    }),
    text: new Text({
        font: '12px Calibri,sans-serif',
        fill: new Fill({ color: '#000' }),
        stroke: new Stroke({
            color: '#fff', width: 2
        })
    })
})

const lineStyle = new Style({
    stroke: new Stroke({
        color: '#3399CC',
        width: 1
    }),
    text: new Text({
        font: '12px Calibri,sans-serif',
        fill: new Fill({ color: '#000' }),
        stroke: new Stroke({
            color: '#fff', width: 2
        }),
        placement: 'line',
        overflow: true,
        //declutterMode: 'obstacle'
    })
})

const drawingLayerStyle: FlatStyleLike = {
    'fill-color': 'rgba(255, 255, 255, 0.2)',
    //'stroke-color': '#ffcc33',
    'stroke-color': '#000000',
    'stroke-width': 2,
    'circle-radius': 7,
    'circle-fill-color': '#ffcc33',
}

const selectStyle = new Style({
    fill: new Fill({
        color: 'rgba(0, 0, 255, 0.3)',
    }),
    stroke: new Stroke({
        color: 'rgba(255, 255, 255, 0.7)',
        width: 2,
    }),
})

const regionsLayerStyle = new Style({
    stroke: new Stroke({
        color: 'blue',
        width: 1,
    }),
    fill: new Fill({
        color: 'rgba(0, 0, 255, 0.01)',
    }),
})

export {
    drawingLayerStyle,
    selectStyle,
    regionsLayerStyle,
    lineStyle,
    figureStyle
}