class SecurityPage {

    /**
     * @param {string|URL} securityRoute
     * @param {objecct[]} devices
     */
    constructor(securityRoute, devices) {
        this.map = null;
        this.devices = devices;
        this.securityRoute = securityRoute;
        this.initialize();
    }

    initMap() {
        let bounds = new google.maps.LatLngBounds();
        let title = null;
        let pos = null;
        let marker = null;

        this.map = new google.maps.Map(document.getElementById("map"), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8,
        });

        const infoWindow = new google.maps.InfoWindow({
            content: "",
            disableAutoPan: true,
        });


        this.devices.forEach(device => {
            if (device.hasValidPosition) {
                title = device.title;
                pos = {
                    lat: device.lat,
                    lng: device.lon,
                };

                //extend the bounds to include each marker's position
                bounds.extend(pos);

                marker = new google.maps.Marker({
                    position: pos,
                    map: this.map,
                    title: title
                });

                marker.addListener("click", () => {
                    infoWindow.setContent(title);
                    infoWindow.open(this.map, marker);
                });
            }
        })

        // now fit the map to the newly inclusive bounds
        this.map.fitBounds(bounds);

        //(optional) restore the zoom level after the map is done scaling
        let listener = google.maps.event.addListener(this.map, "idle", ()  => {
            this.map.setZoom(3);
            google.maps.event.removeListener(listener);
        });
    }

    initialize() {
        document.addEventListener("DOMContentLoaded", () => {
            document.addEventListener('change', this.onChange.bind(this))
            document.getElementById('platform_options').autocomplete = 'off'
        });
    }

    onChange(event) {

        let target = event.target;
        let element;

        if (element = target.closest('input[type=checkbox]')) {
            let id = element.dataset.id;
            let checked = element.checked ? '1' : '0';
            let url = this.securityRoute + `?platform_options_id=${id}&enable=${checked}`;

            Commons.postBody(url, '', (json) => {
                if (!json.status) {
                    let errorContainer = document.getElementById('changePlatformOption')
                    errorContainer.textContent = json.message;
                    errorContainer.classList.remove('d-none');
                }
            });
        }
    }

}