'use strict';

import {
    CRS,
    DivIcon,
    ImageOverlay,
    LatLng,
    LatLngBounds,
    Map,
    Marker,
    Popup,
} from './leaflet/leaflet.js';

let cookies = {}
let map = null;
let active = null;
const markers = {}

window.addEventListener('DOMContentLoaded', async (event) => {
    try {
        await makeApiRequest('GET', '/');
        cookies = get_cookies();
        const settings = JSON.parse(atob(cookies['server_settings']));
        document.querySelector('head > title')
            .textContent = settings['site_name'];
        document.getElementById('banner-sitename')
            .textContent = settings['site_name'];
        document.getElementById('banner-userid')
            .textContent = cookies['username'];

        map = setupMap('map', 'static/karta_plan3.png');

        makeApiRequest('GET', '/points')
            .then((data) => {
                for(const [id, values] of Object.entries(data)) {
                    const pointData = {id: id,
                                       position: new LatLng(values.latitude,
                                                            values.longitude),
                                       placeName: values.placeName,
                                       personName: values.personName,
                                       personRole: values.personRole};
                    if(values.hasOwnProperty('comment')) {
                        pointData.comment = values.comment;
                    }
                    drawMarker(pointData);
                }
            });

        const create_button = document.getElementById('create-workspace');
        if(cookies['admin']) {
            create_button.textContent = 'Skapa arbetsplatser';
            create_button.addEventListener('click', (event) => {
                create_button.classList.toggle('cancel');
                if(create_button.classList.contains('cancel')) {
                    create_button.textContent = 'Sluta skapa arbetsplatser';
                    map.on('click', createMarker);
                } else {
                    create_button.textContent = 'Skapa arbetsplatser';
                    map.off('click', createMarker);
                }
            });
        } else {
            create_button.remove();
        }

        const export_button = document.getElementById('export-workspaces');
        if(cookies['export']) {
            export_button.addEventListener('click', (event) => {
                makeApiRequest('GET', '/export').then((result) => {
                    // Have to pass a name, but it won't be used so passing ''
                    const file = new File([result.csv_data], '');
                    const url = window.URL.createObjectURL(file);

                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `export-dsv-karta.tsv`;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                });
            });
        } else {
            export_button.remove();
        }

        const toggle_button = document.getElementById('toggle-labels');
        toggle_button.addEventListener('click', (event) => {
            localStorage.setItem('label-visibility', !getVisibility());
            updateLabels();
        });

        const search_button = document.getElementById('search-button');
        search_button.addEventListener('click', (event) => {
            const search_term = document.getElementById('search-term').value;
            if(!search_term) {
                clearSearchResults();
                return;
            }

            clearSearchResults(true);
            getSearchResults(search_term)
                .then((result_ids) => prepareResultElements(result_ids))
                .then((result_elements) => showSearchResults(result_elements));
        });

        document.querySelector('body').removeAttribute('style');
    } catch(e) {
        if(e.message === 'access denied') {
            deny_access();
            return;
        }
        throw e;
    }
});

function setupMap(element_id, map_image) {
    const top_left = new LatLng(10, 0);
    const bottom_right = new LatLng(0, 10);
    const bounds = new LatLngBounds(top_left, bottom_right);

    let zoom = 7;
    const stored_zoom = localStorage.getItem('zoom-level');
    if(stored_zoom) {
        zoom = Number(stored_zoom);
    }

    let center = bounds.getCenter();
    const latitude = localStorage.getItem('view-latitude');
    const longitude = localStorage.getItem('view-longitude');
    if(latitude) {
        center = new LatLng(Number(latitude), Number(longitude));
    }

    const map = new Map(element_id, {
        center: center,
        maxBounds: bounds.pad(0.5),
        zoom: zoom,
        zoomSnap: 0.1});
    const background = new ImageOverlay(map_image, bounds);
    background.addTo(map);

    map.on('zoomend', () => {
        localStorage.setItem('zoom-level', map.getZoom());
    });

    map.on('moveend', (event) => {
        const newPosition = map.getCenter();
        localStorage.setItem('view-latitude', newPosition.lat);
        localStorage.setItem('view-longitude', newPosition.lng);
    });

    map.on('click', (event) => {
        clearActive();
    });

    return map;
}

function createMarker(event) {
    const form = document.createElement('div');
    form.appendChild(document.getElementById('pin-form')
                     .content.cloneNode(true));
    form.querySelector('#save').addEventListener('click', () => {
        const markerData = {
            id: crypto.randomUUID(),
            position: event.latlng,
            placeName: form.querySelector('#workspace-name').value,
            personName: form.querySelector('#person-name').value,
            personRole: form.querySelector('#person-role').value,
            comment: form.querySelector('#comment').value
        }
        saveMarker(markerData);
        drawMarker(markerData);
        map.closePopup();
    });

    const deleteButton = form.querySelector('#delete');
    deleteButton.parentNode.removeChild(deleteButton);

    map.openPopup(form, event.latlng);
    form.querySelector('#workspace-name').focus();
}

function drawMarker(data) {
    const markerId = data.id;
    const position = data.position;
    const placeName = data.placeName;
    const personName = data.personName;
    const personRole = data.personRole;

    let comment = '';
    if(cookies['export']) {
        comment = data.comment;
    }

    const label = document.createElement('div');

    let draggable = false;
    if(cookies['admin']) {
        draggable = true;
    }

    label.appendChild(document.getElementById('pin-template')
                      .content.cloneNode(true));

    const icon_hack = new DivIcon({
        className: 'map-icon',
        iconSize: [20, 20],
        html: label
    });
    const marker = new Marker(position, {
        icon: icon_hack,
        title: placeName,
        draggable: draggable
    });

    const popup_div = document.createElement('div');

    if(cookies['admin']) {
        popup_div.appendChild(document.getElementById('pin-form')
                          .content.cloneNode(true));
        const popup_placename = popup_div.querySelector('#workspace-name');
        const popup_personname = popup_div.querySelector('#person-name');
        const popup_personrole = popup_div.querySelector('#person-role');
        const popup_comment = popup_div.querySelector('#comment');
        popup_placename.value = placeName;
        popup_personname.value = personName;
        popup_personrole.value = personRole;
        popup_comment.value = comment;

        popup_div.querySelector('#save').addEventListener('click', () => {
            markers[markerId].placeName = popup_placename.value;
            markers[markerId].personName = popup_personname.value;
            markers[markerId].personRole = popup_personrole.value;
            markers[markerId].comment = popup_comment.value;

            saveMarker({id: markerId,
                        position: markers[markerId].marker.getLatLng(),
                        placeName: popup_placename.value,
                        personName: popup_personname.value,
                        personRole: popup_personrole.value,
                        comment: popup_comment.value});
            map.closePopup();

            updateLabel(marker);
        });

        popup_div.querySelector('#delete').addEventListener('click', () => {
            deleteMarker(markerId);
            delete markers[markerId];
            map.removeLayer(marker);
        });

        marker.on('popupopen', (event) => {
            if(!popup_placename.value) {
                popup_placename.focus();
            } else {
                popup_personname.focus();
            }
        });

        marker.on('popupclose', (event) => {
            if(!markers[markerId]) {
                // Don't act on deleted markers
                return;
            }
            popup_placename.value = markers[markerId].placeName;
            popup_personname.value = markers[markerId].personName;
            popup_personrole.value = markers[markerId].personRole;
            popup_comment.value = markers[markerId].comment;
        });

        marker.on('move', (event) => {
            saveMarker({id: markerId,
                        position: markers[markerId].marker.getLatLng(),
                        placeName: markers[markerId].placeName,
                        personName: markers[markerId].personName,
                        personRole: markers[markerId].personRole,
                        comment: markers[markerId].comment,
                       });
        });
    } else {
        popup_div.appendChild(document.getElementById('pin-info')
                          .content.cloneNode(true));
        popup_div.querySelector('.workspace-name').textContent = placeName;
        popup_div.querySelector('.person-name').textContent = personName;
        const role_element = popup_div.querySelector('.person-role');
        if(personRole) {
            role_element.textContent = personRole;
        } else {
            role_element.remove();
        }

        if(!comment) {
            popup_div.querySelector('.comment').remove();
        } else {
            popup_div.querySelector('.comment-text').textContent = comment;
        }
    }

    marker.on('popupopen', (event) => {
        if(active && marker !== active.marker) {
            clearActive();
        }
    });

    const result_template = document.getElementById('result-template')
          .content.cloneNode(true);
    const search_element = result_template.querySelector('.search-result');
    search_element.addEventListener('click', (event) => {
        setActive(marker, search_element);
        map.flyTo(marker.getLatLng());
    });

    search_element.addEventListener('dblclick', (event) => {
        setActive(marker, search_element);
        map.flyTo(marker.getLatLng());
        marker.openPopup();
    });

    markers[markerId] = {
        marker: marker,
        search_element: search_element,
        placeName: placeName,
        personName: personName,
        personRole: personRole,
        comment: comment
    };
    marker.id = markerId;

    const popup = new Popup();
    popup.setContent(popup_div);
    marker.bindPopup(popup);
    marker.addTo(map);
    updateLabel(marker);
}

function updateLabels(overrides) {
    for(const [id, values] of Object.entries(markers)) {
        updateLabel(values.marker, overrides);
    }
}

function updateLabel(marker, overrides) {
    if(!overrides) {
        overrides = {};
    }
    const placeName = markers[marker.id].placeName;
    const personName = markers[marker.id].personName;
    const personRole = markers[marker.id].personRole;
    const comment = markers[marker.id].comment;
    const label = marker.getElement().querySelector('.map-flex');
    const text_label = label.querySelector('.label');
    let visible = getVisibility();
    if(overrides.visible !== undefined) {
        visible = overrides.visible;
    }

    let icon_src = './static/pin-red.svg';
    let tooltip = personName;
    if(!personName) {
        icon_src = './static/pin-yellow.svg';
        tooltip = placeName;
    }

    let z_offset = 0;
    if(overrides.active) {
        icon_src = './static/pin-blue.svg';
        z_offset = 1000;
    }

    let dim = false;
    if(overrides.dim !== undefined) {
        dim = overrides.dim;
    }
    if(dim) {
        label.classList.add('dim');
        icon_src = './static/pin-gray.svg';
    } else {
        label.classList.remove('dim');
    }

    marker.setZIndexOffset(z_offset);
    label.querySelector('img').setAttribute('src', icon_src);
    marker.getElement().setAttribute('title', tooltip);

    label.querySelector('.location').textContent = placeName;
    label.querySelector('.person').textContent = personName;

    // Avoiding use of .toggle() here so we guarantee consistency
    // even if other actions have modified individual labels
    if(visible) {
        text_label.classList.remove('no-label');
    } else {
        text_label.classList.add('no-label');
    }

    const search_element = markers[marker.id].search_element;
    search_element.querySelector('.location').textContent = placeName;
    search_element.querySelector('.person').textContent = personName;

    const role_element = search_element.querySelector('.role');
    role_element.textContent = personRole;
    if(!role_element.textContent) {
        role_element.classList.add('hidden');
    } else {
        role_element.classList.remove('hidden');
    }

    const comment_element = search_element.querySelector('.comment');
    comment_element.textContent = comment;
    if(!comment_element.textContent) {
        comment_element.classList.add('hidden');
    } else {
        comment_element.classList.remove('hidden');
    }

}

function getVisibility() {
    // This hack deals with localStorage only storing strings:
    return localStorage.getItem('label-visibility') === 'true';
}

function clearSearchResults(doing_search) {
    const results_div = document.getElementById('search-results');
    while(results_div.firstChild) {
        results_div.removeChild(results_div.lastChild);
    }

    if(doing_search) {
        const spinner = document.createElement('img');
        spinner.setAttribute('src', './static/spinner.svg');
        spinner.id = 'search-spinner';
        results_div.appendChild(spinner);
    }

    updateLabels();

    return results_div;
}

async function getSearchResults(search_term) {
    const lowercase_term = search_term.toLowerCase();
    const result_ids = [];
    for(const [id, values] of Object.entries(markers)) {
        if(values.placeName.toLowerCase().includes(lowercase_term)
           || values.personName.toLowerCase().includes(lowercase_term)) {
            result_ids.push(id);
        }
    }
    return result_ids;
}

async function prepareResultElements(result_ids) {
    const result_objects = [];

    for(const result_id of result_ids) {
        result_objects.push(markers[result_id]);
    }

    result_objects.sort((e1, e2) => {
        const person1 = e1.personName.toLowerCase();
        const person2 = e2.personName.toLowerCase();

        if(person1 && !person2) {
            return -1;
        }
        if(person2 && !person1) {
            return 1;
        }
        if(person1 && person2) {
            return person1.localeCompare(person2);
        }

        const location1 = e1.placeName.toLowerCase();
        const location2 = e2.placeName.toLowerCase();

        if(location1 && !location2) {
            return -1;
        }
        if(location2 && !location1) {
            return 1;
        }
        if(location1 && location2) {
            return location1.localeCompare(location2);
        }

        return 0;
    });

    return result_objects;
}

async function showSearchResults(result_objects) {
    const results_div = clearSearchResults();

    updateLabels({dim: true});

    result_objects.forEach((result) => {
        results_div.appendChild(result.search_element);
        updateLabel(result.marker);
    });
}

function setActive(marker, result_element) {
    clearActive();
    active = {marker: marker,
              result: result_element};
    updateLabel(marker, {active: true,
                         visible: true});
    result_element.classList.add('active');
}

function clearActive() {
    if(active) {
        updateLabel(active.marker);
        active.result.classList.remove('active');
        active = null;
    }
}

function deny_access() {
    const body = document.querySelector('body');
    const main = document.querySelector('main');
    const sidebar = document.getElementById('sidebar');
    const header = document.getElementById('banner-sitename');
    const message = document.createElement('p');

    body.removeChild(main);
    body.removeChild(sidebar);

    header.textContent = 'Access denied';
    message.textContent = 'You do not have access to this site.';
    message.id = 'access-denied';
    body.appendChild(message);
    body.removeAttribute('style');
}

function get_cookies() {
    var out = new Object();
    const cookies = document.cookie.split('; ');
    cookies.forEach((cookie) => {
        const temp = cookie.split('=');
        const name = temp[0];
        const value = temp.slice(1).join('=');
        out[name] = value;
    });
    return out;
}

function login() {
    const current_path = window.location.pathname;
    return window.location.replace('/api/login?return='
                                   + current_path);
}

async function saveMarker(data) {
    const request_body = {id: data.id,
                          placeName: data.placeName,
                          personName: data.personName,
                          latitude: data.position.lat,
                          longitude: data.position.lng,
                          personRole: data.personRole,
                          comment: data.comment};
    makeApiRequest('PUT', '/point', request_body);
}

async function deleteMarker(markerId) {
    makeApiRequest('DELETE', '/point', {'id': markerId});
}

async function makeApiRequest(method, path, body) {
    const data = {'method': method,
                  'headers': {'Content-Type': 'application/json'}};
    if(method != 'GET') {
        data['body'] = JSON.stringify(body);
    }
    const request = new Request('/api' + path, data);
    return fetch(request)
        .then((response) => {
            if(response.status === 403) {
                const access = cookies['access'];
                if(access === 'denied') {
                    throw new Error('access denied');
                }
                login();
            }
            return response.json();
        }, (error) => {
            alert('A network error has occurred. Please reload the page.');
        });
}