<template>
    <Page class="page">
        <ActionBar title="Geolocation" class="action-bar" />
        <StackLayout class="home-panel">

            <Button text="Get My Item" @tap="getItem" class="btn btn-primary" />

            <StackLayout>
                <Button text="Show location" @tap="enableLocationServices"
                    :visibility="currentGeoLocation.latitude ? 'collapsed' : 'visible'"
                    class="btn btn-primary" />
                <StackLayout :visibility="currentGeoLocation.latitude ? 'visible' : 'collapsed'">
                    <Label :text="'Latitude: ' + currentGeoLocation.latitude" />
                    <Label :text="'Longitude: ' + currentGeoLocation.longitude" />
                    <Label :text="'Altitude: ' + currentGeoLocation.altitude" />
                    <Label :text="'Direction: ' + currentGeoLocation.direction" />
                </StackLayout>
            </StackLayout>

            <Label :text="'Items: ' + collectedItems" class="lbl" :key="collectedItems" />
        </StackLayout>
    </Page>
</template>

<script>
    const geoLocation = require("nativescript-geolocation");

    const app = require("tns-core-modules/application");
    const platform = require("tns-core-modules/platform");
    const Vue = require("nativescript-vue");
    const httpModule = require("http");
    const geolocation = require("nativescript-geolocation");
    const {
        Accuracy
    } = require("tns-core-modules/ui/enums");
    export default {
        data() {
            return {
                currentGeoLocation: {
                    latitude: null,
                    longitude: null,
                    altitude: null,
                    direction: null
                },

                accelerometerValues: {
                    x: null,
                    y: null,
                    z: null
                },

                lat: "",
                lon: "",
                speed: "",
                addr: "",
                selectedItems: "",
                collectedItems: [null]
            };
        },
        methods: {
            enableLocationServices: function() {
                geoLocation.isEnabled().then(enabled => {
                    if (!enabled) {
                        geoLocation
                            .enableLocationRequest()
                            .then(() => this.showLocation());
                    } else {
                        this.showLocation();
                    }
                });
            },
            showLocation: function() {
                geoLocation.watchLocation(
                    location => {
                        this.currentGeoLocation = location;
                    },
                    error => {
                        alert(error);
                    }, {
                        desiredAccuracy: 3,
                        updateDistance: 10,
                        minimumUpdateTime: 1000 * 1
                    }
                );
            },

            getItem() {
                httpModule
                    .getJSON(
                        "https://fortnite-public-api.theapinetwork.com/prod09/items/list"
                    )
                    .then(
                        result => {
                            // var i;
                            var random = Math.floor(
                                Math.random() * (+result.length - 0)
                            );
                            // for (i = 0; i < result.length; i++){
                            this.collectedItems.push(
                                JSON.stringify(result[random].name)
                            );
                            this.collectedItems.toString();
                            console.log(this.collectedItems);
                        },
                        function(error) {
                            console.error(JSON.stringify(error));
                        }
                    );
            }
        }
    };
</script>
<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }

    .description-label {
        margin-bottom: 15;
    }
</style>