/*
In this example, we use Ox.MapEditor
*/

'use strict';

Ox.load(['UI', 'Geo'], function() {
    var $storage = Ox.localStorage("map_editor")
    var places = $storage('places') || []
    var $map = Ox.MapEditor({
            addPlace: function(place, callback) {
                console.log("addPlace", place)
                place.id = Ox.encodeBase26(Ox.uid())
                places.push(place)
                $storage("places", places)
                $map.options({
                    places: Ox.api(places, {
                        geo: true,
                        sort: '-area'
                    })
                })
                setTimeout(() => {
                    callback({
                        status: {
                            code: 200
                        },
                        data: place
                    })
                }, 200)
            },
            editPlace: function(place, callback) {
                places.forEach(p => {
                    if (p.id == place.id) {
                        Object.assign(p, place);
                        place = p
                    }
                })
                $storage("places", places)
                callback({
                    status: {
                        code: 200
                    },
                    data: place
                })
            },
            getMatches: function(names, callback) {
                console.log("getMatches", names)
                callback(23);
            },
            hasMatches: true, // FIXME: getMatches is enough
            height: 800,
            mode: 'add', // 'define',
            names: null,
            places: Ox.api(places, {
                geo: true,
                sort: '-area'
            }),
            removePlace: function(place, callback) {
                console.log("removePlace", place.id, places)
                places = places.filter(p => { return p.id != place.id })
                console.log("new places", places)
                $storage("places", places)
                $map.options({
                    places: Ox.api(places, {
                        geo: true,
                        sort: '-area'
                    })
                })
                setTimeout(() => {
                    callback({
                        status: {
                            code: 200
                        },
                    })
                }, 100)
            },
            selected: '',
            showControls: false,
            showLabels: false,
            showTypes: true,
            width: 600
        })
        .appendTo(Ox.$body);

    Ox.$window.bind({resize: $map.resizeMap});

});