import {LatitudePos, MultiVals, ResourceNote, ResourceNoteTypes, ResourcePos} from "~/types";
import * as L from 'leaflet'
import {LatLng} from 'leaflet'

const letter_icon = (letter: string, color: string) => {
    return L.divIcon({
        html: `<span style="color: ${color}; font-size: ${13 * (window.innerWidth / 360)}px">${letter}</span>`,
        iconSize: [18, 18]
    });
}

const comment_icon = (color: string) => {
    return L.divIcon({
        className: "rect-comment-icon",
        html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="${color}" d="M256 32C114.6 32 .0272 125.1 .0272 240c0 47.63 19.91 91.25 52.91 126.2c-14.88 39.5-45.87 72.88-46.37 73.25c-6.625 7-8.375 17.25-4.625 26C5.818 474.2 14.38 480 24 480c61.5 0 109.1-25.75 139.1-46.25C191.1 442.8 223.3 448 256 448c141.4 0 255.1-93.13 255.1-208S397.4 32 256 32zM256.1 400c-26.75 0-53.12-4.125-78.38-12.12l-22.75-7.125l-19.5 13.75c-14.25 10.12-33.88 21.38-57.5 29c7.375-12.12 14.37-25.75 19.88-40.25l10.62-28l-20.62-21.87C69.82 314.1 48.07 282.2 48.07 240c0-88.25 93.25-160 208-160s208 71.75 208 160S370.8 400 256.1 400z"/></svg>`,
        iconSize: [14, 14]
    });
}

const get_rect_right_top = (latlngs: (L.LatLngTuple & L.LatLng)[]) => {
    return {
        lat: Math.max(...latlngs.map(x => x[0] || x.lat)),
        lng: Math.max(...latlngs.map(x => x[1] || x.lng))
    }
}

const multi_pos = (resource_pos?: MultiVals<ResourcePos>) => {
    let pos = resource_pos?.vals.find(pos => !!pos.multi_lat_pos)
    return pos?.multi_lat_pos?.points.vals.map(({lat, lng}: LatitudePos) => [lat, lng] as L.LatLngTuple);
}

const single_pos = (lat_pos?: LatitudePos, resource_pos?: MultiVals<ResourcePos>) => {
    if (lat_pos) return lat_pos;
    return resource_pos?.vals.find(x => !!x.lat_pos)?.lat_pos;
}

const latlngs2multi_pos = (latlngs: L.LatLng[], note_type: ResourceNoteTypes) => {
    return {
        multi_lat_pos: {
            points: {
                vals: latlngs
            },
            pos_type: note_type
        }
    } as ResourcePos
}

const draw_comment_icon = (map: L.Map, coordinates: (L.LatLngTuple & L.LatLng)[], data: ResourceNote, onClick: (data: ResourceNote) => void) => {
    let color = (data.meta && data.meta.meta && data.meta.meta.color) || "red"
    return L.marker(get_rect_right_top(coordinates), {icon: comment_icon(color), pmIgnore: true}).addTo(map).on("click", () => onClick(data));
}

const draw_resource = (map: L.Map, data: ResourceNote, onClick: (data: ResourceNote) => void, readonly: boolean) => {
    let {serial_no, lat_pos, resource_pos, note_type, meta} = data;
    let coordinates = multi_pos(resource_pos);

    // default to red
    let color = "red";
    if (meta && meta.meta && meta.meta.color) {
        color = meta.meta.color;
    }
    let latlng = single_pos(lat_pos, resource_pos);
    switch (note_type) {
        case ResourceNoteTypes.Rect:
            if (!coordinates?.length) return;
            let rect = L.rectangle(coordinates, {color, weight: 1}).addTo(map);

            if (!readonly || data.comments?.length) {
                // @ts-ignore add comment icon to rectangle to show comments
                rect._comment = draw_comment_icon(map, coordinates, data, onClick)
            }

            return rect;
        case ResourceNoteTypes.Line:
            if (!coordinates?.length) return;
            // @ts-ignore
            return L.polyline(coordinates, {color, weight: 2}).addTo(map);
        case ResourceNoteTypes.Alphabet:
        default:
            if (!latlng) return;
            return L.marker(latlng as LatLng, {icon: letter_icon(serial_no, color), pmIgnore: true}).addTo(map)
                .on("click", () => onClick(data))
    }
}

export {
    letter_icon, draw_resource, latlngs2multi_pos, get_rect_right_top, draw_comment_icon
}
