import { GeoJSON, circleMarker, canvas, DomUtil } from 'leaflet';

export const customOptions = {
    canvasBezierStyle: {
        type: 'classBreaks',
            fieldUp: 'up_volume',
            fieldDown: 'down_volume',
            pathProperties: {
                lineWidth: 100
            },
            classBreakInfos: [{
                classMinValue: 0,
                classMaxValue: 500,
                symbol: {
                    strokeStyle: 'pind',
                    lineWidth: 0,
                    fillOpacity: 0.7,
                    lineOpacity: 0.7,
                    lineCap: 'sqare',
                    shadowBlur: 0
                }
            }]
    },
    canvasBezierStyleUp: {
        strokeStyle: '#FD9107'
    },
    canvasBezierStyleDown: {
        strokeStyle: '#00A2EE'
    },
    animatedCanvasBezierStyleUp: {
        strokeStyle: '#000000'
    },
    animatedCanvasBezierStyleDown: {
        strokeStyle: '#000000'
    },
    sameSlices: false,
    markersInheritOptions: true,
    animatedCanvasBezierStyle: {
        type: 'simple',
        symbol: {
            // use canvas styling options (compare to CircleMarker styling below)
            strokeStyle: '#ffffff',
            lineWidth: 3.25,
            lineDashOffsetSize: 4, // custom property used with animation sprite sizes
            lineCap: 'butt',
            shadowColor: '#ffffff',
            shadowBlur: 0
        }
    },

    // valid values: 'selection' or 'all'
    // use 'all' to display all Bezier paths immediately
    // use 'selection' if Bezier paths will be drawn with user interactions
    pathDisplayMode: 'all',

    wrapAroundCanvas: true,

    animationStarted: true,
    mapValueMaxRange: 2000,
    animationEasingFamily: 'Linear',

    animationEasingType: 'None',
    calculateOriginPieChartByLinkedCharts: true,
    animationDuration: 6000,
    animationSpeed: .5,
    pieChartsColors: {
        "inbound": '#FD9107',
        "outbound": '#00A2EE',
        "internal": '#BA58E1'
    },
    callQualityColors: [
        { max: 0, color: "#002d5b" }, // grey
        { max: 2.5, color: "#c12f1a" }, //"red":
        { max: 3.5, color: "#ffb901" }, //"yellow"
        { max: 4, color: "#34b440" }, //"lightGreen"
        { max: 5, color: "#269b2b" } //"darkGreen"
    ],
    pieChartsDisplayTypes: {
        "inbound": true,
        "outbound": true,
        "internal": true
    },
    pieChartSize: 50,
    pieChartSliceFont: "Arial",
    pieChartSliceFontSize: 13,
    pieChartSliceTinyFontSize: 8,

    originAndDestinationFieldIds: {
        originUniqueIdField: 'origin_city_id',
        originGeometry: {
            x: 'origin_lon',
            y: 'origin_lat'
        },
        destinationUniqueIdField: 'destination_city_id',
        destinationGeometry: {
            x: 'destination_lon',
            y: 'destination_lat'
        }
    }
}

export const baseOptions = {
    // this is only a default option example,
    // developers will most likely need to provide this
    // options object with values unique to their data

    // pointToLayer: function (geoJsonPoint, latlng) {
    //     var marker = circleMarker(latlng);
    //     // if (oms) {
    //     //     oms.addMarker(marker);
    //     // }
    //     return marker;
    // },

    style: (geoJsonFeature) => {
        // use leaflet's path styling options

        // since the GeoJSON feature properties are modified by the layer,
        // developers can rely on the "isOrigin" property to set different
        // symbols for origin vs destination CircleMarker stylings

        if (geoJsonFeature.properties.isOrigin) {
            return {
                renderer: canvas(),
                radius: 30,
                weight: 1,
                color: 'black',
                fillColor: 'rgba(195, 255, 62, 0.6)',
                fillOpacity: 1,
                strokeOpacity: 0
            };
        } else {
            return {
                renderer: canvas(),
                radius: 10,
                weight: 0.25,
                color: 'rgb(0, 142, 170)',
                fillColor: 'rgb(0, 142, 170)',
                fillOpacity: 1
            };
        }
    },
}