import { getArrowPolygon } from "athena-utils/shape/Arrow.js";
import { ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL } from "athena-utils/shape/Arrow.js";
import { getFrontline } from "./Frontline.js";
import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
import { updateButtonStyles } from "./Drawing.js";
import { ARROW, FRONTLINE, ADDITIONAL_SIDE } from "./Drawing.js";

const DEFAULT_ARROW_PARAMS = {
    splineStep: 20,
    offsetDistance: 12000,
    calculation: ARROW_BODY_STYLE_LINEAR,
    range: 1,
    minValue: 0.1,
    widthArrow: 5,
    lengthArrow: 8,
    paintOptions: {
        "fill-color": "#0099ff",
        "fill-outline-color": "#005588",
        "fill-opacity": 0.6
    }
};

const DEFAULT_FRONTLINE_PARAMS = {
    splineStep: 0.08,
    offsetDistance: 10000,
    style: LEFT_SIDE,
    protrusion: {
        length: 15000,
        startSize: 5000,
        endSize: 500,
        gap: 15000
    },
    paintOptionsLeft: {
        "fill-color": "#00ff37",
        "fill-outline-color": "#008809",
        "fill-opacity": 0.6
    },
    paintOptionsRight: {
        "fill-color": "#0011ff",
        "fill-outline-color": "#002b88",
        "fill-opacity": 0.6
    }
};

export let currentFeature = null;

export function setCurrentFeature(feature) {
    currentFeature = feature;
}

export const arrowParamsMap = new Map();
export const frontlineParamsMap = new Map();

export function handleDraw(e, myMap, myDraw, drawStyle) {
    const feature = e.features[0];
    const coords = feature.geometry.coordinates;
    const id = feature.id;

    if (drawStyle === ARROW) {
        DrawArrow(coords, id, myMap, myDraw);
    } else if (drawStyle === FRONTLINE) {
        DrawFrontline(coords, id, myMap, myDraw);
    }
}

export function handleClick(click, prefix, paramsMap, showEditorFunction, myMap, myDraw, drawStyle) {
    const features = myMap.queryRenderedFeatures(click.point, {
        layers: myMap.getStyle().layers
            .filter(l => l.id.startsWith(prefix + "-"))
            .map(l => l.id)
    });

    if (features.length === 0) return;

    drawStyle = prefix;
    updateButtonStyles(drawStyle);
    const feature = features[0];
    const featureId = feature.layer.id.replace(prefix + "-", '');

    const allFeatures = myDraw.getAll().features;
    currentFeature = allFeatures.find(f => f.id === featureId);

    if (currentFeature) {
        const params = paramsMap.get(featureId);
        if (params) {
            showEditorFunction(params);
        }
        myDraw.changeMode('direct_select', { featureId: featureId });
    }
}

function DrawArrow(coordinates, polygonId, myMap, myDraw) {
    if (!arrowParamsMap.has(polygonId)) {
        arrowParamsMap.set(polygonId, structuredClone(DEFAULT_ARROW_PARAMS));
    }

    const params = arrowParamsMap.get(polygonId);
    const arrowGeoJSON = getArrowPolygon(
        {
            points: coordinates,
            splineStep: params.splineStep,
            offsetDistance: params.offsetDistance
        },
        {
            calculation: params.calculation,
            range: params.range,
            minValue: params.minValue
        },
        {
            widthArrow: params.widthArrow,
            lengthArrow: params.lengthArrow
        }
    );
    updatePolygonOnMap(ARROW, polygonId, drawOnMap, arrowGeoJSON, params.paintOptions, myMap, myDraw);
}

function DrawFrontline(coordinates, polygonId, myMap, myDraw) {
    if (!frontlineParamsMap.has(polygonId)) {
        frontlineParamsMap.set(polygonId, structuredClone(DEFAULT_FRONTLINE_PARAMS));
    }

    const params = frontlineParamsMap.get(polygonId);
    const frontlineGeoJSON = getFrontline(
        {
            points: coordinates,
            splineStep: params.splineStep,
            offsetDistance: params.offsetDistance,
            style: params.style
        },
        params.protrusion
    );

    let polygonToDraw = frontlineGeoJSON;

    // Only one side
    if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
        polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
    }

    // Both sides
    if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
        updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsLeft, myMap, myDraw);

        let additionalPolygonToDraw = frontlineGeoJSON.rightPoly;

        drawOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId + ADDITIONAL_SIDE), params.paintOptionsRight, myMap, myDraw);
        return;
    }

    if (params.style == 1){ // LEFT_SIDE
        updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsLeft, myMap, myDraw);
    }else if(params.style == 2){ // RIGHT_SIDE
        updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsRight, myMap, myDraw);
    }
}

function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson, paintOptions, myMap, myDraw) {
    const layerId = prefix + "-" + polygonId;

    if (myMap.getLayer(layerId)) myMap.removeLayer(layerId);
    if (myMap.getSource(layerId)) myMap.removeSource(layerId);

    drawFunction(geojson, layerId, paintOptions, myMap);

    const allFeatures = myDraw.getAll().features;
    currentFeature = allFeatures.find(f => f.id === polygonId);
}

export function drawOnMap(frontlineGeoJSON, id, paintOptions = {}, myMap) {
    if (myMap.getLayer(id)) myMap.removeLayer(id);
    if (myMap.getSource(id)) myMap.removeSource(id);

    myMap.addSource(id, {
        type: 'geojson',
        data: frontlineGeoJSON
    });

    myMap.addLayer({
        id: id,
        type: 'fill',
        source: id,
        paint: {
            'fill-color': paintOptions['fill-color'],
            'fill-opacity': paintOptions['fill-opacity'],
            'fill-outline-color': paintOptions['fill-outline-color']
        }
    });
}


export function handleDelete(polygonType, myMap, myDraw)
{
    if (!currentFeature) return;

    const id = currentFeature.id;
    myDraw.delete(id);

    //ARROW
    if(polygonType == ARROW){
        const arrowLayerId = polygonType + "-" + id;
        DeleteFromMap(arrowLayerId, id, myMap);
    }

    //Frontline
    if(polygonType == FRONTLINE){
        const frontlineLayerId = polygonType + "-" + id;

        if (frontlineParamsMap.get(id).style == 3){ //BOTH_SIDES
            const frontlineLayerIdB = polygonType + "-" + (id + ADDITIONAL_SIDE);

            DeleteFromMap(frontlineLayerId, id, myMap);
            DeleteFromMap(frontlineLayerIdB, id + ADDITIONAL_SIDE, myMap);
            hideArrowEditor();
            hideFrontlineEditor();
            return;
        }

        DeleteFromMap(frontlineLayerId, id, myMap);
    }

    hideArrowEditor();
    hideFrontlineEditor();
}

function DeleteFromMap(layerId, FeatureId, myMap){
    if (myMap.getLayer(layerId)) myMap.removeLayer(layerId);
    if (myMap.getSource(layerId)) myMap.removeSource(layerId);

    arrowParamsMap.delete(FeatureId);
}

export function showArrowEditor(params) {
    const popup = document.getElementById('arrow-editor');
    popup.style.display = 'block';
    popup.style.left = '10px';
    popup.style.top = '70px';

    document.getElementById('splineStep').value = params.splineStep;
    document.getElementById('offsetDistance').value = params.offsetDistance;
    document.getElementById('range').value = params.range;
    document.getElementById('minValue').value = params.minValue;
    document.getElementById('widthArrow').value = params.widthArrow;
    document.getElementById('lengthArrow').value = params.lengthArrow;
    document.getElementById('styleArrow').value = params.calculation;
    
    document.getElementById('arrowFillColor').value = params.paintOptions["fill-color"];
    document.getElementById('arrowOutlineColor').value = params.paintOptions["fill-outline-color"];
    parseFloat(document.getElementById('arrowOpacity').value = params.paintOptions["fill-opacity"]);
}

export function hideArrowEditor() {
    const popup = document.getElementById('arrow-editor');
    popup.style.display = 'none';
    currentFeature = null;
}

export function showFrontlineEditor(params) {
    const popup = document.getElementById('frontline-editor');
    popup.style.display = 'block';
    popup.style.left = '10px';
    popup.style.top = '70px';

    document.getElementById('splineStepFrontline').value = params.splineStep;
    document.getElementById('offsetDistanceFrontline').value = params.offsetDistance;
    document.getElementById('styleFrontline').value = params.style;

    document.getElementById('protrusionLength').value = params.protrusion.length;
    document.getElementById('protrusionStartSize').value = params.protrusion.startSize;
    document.getElementById('protrusionEndSize').value = params.protrusion.endSize;
    document.getElementById('protrusionGap').value = params.protrusion.gap;
    
    document.getElementById('frontlineFillColorLeft').value = params.paintOptionsLeft["fill-color"];
    document.getElementById('frontlineOutlineColorLeft').value = params.paintOptionsLeft["fill-outline-color"];
    parseFloat(document.getElementById('frontlineOpacityLeft').value = params.paintOptionsLeft["fill-opacity"]);

    document.getElementById('frontlineFillColorRight').value = params.paintOptionsRight["fill-color"];
    document.getElementById('frontlineOutlineColorRight').value = params.paintOptionsRight["fill-outline-color"];
    parseFloat(document.getElementById('frontlineOpacityRight').value = params.paintOptionsRight["fill-opacity"]);
}

export function hideFrontlineEditor() {
    const popup = document.getElementById('frontline-editor');
    popup.style.display = 'none';
    currentFeature = null;
}