<template>
    <Page class="page">
        <ActionBar class="action-bar">

            <NavigationButton ios:visibility="collapsed" icon="res://menu" @tap="onDrawerButtonTap"></NavigationButton>

            <ActionItem icon="res://navigation/menu"
                        android:visibility="collapsed"
                        @tap="onDrawerButtonTap"
                        ios.position="left">
            </ActionItem>
            <Label class="action-bar-title" text="Home"></Label>
        </ActionBar>

        <GridLayout rows="auto, 300, auto, auto">
            <StackLayout row="0" orientation="vertical" padding="5">
                <StackLayout orientation="horizontal" row="0" padding="5">
                    <Label text="saveToGallery"/>
                    <Switch v-model="saveToGallery"/>
                </StackLayout>

            </StackLayout>
            <MapView width="100%" row="1" height="300" :latitude="center.lat" :longitude="center.lng" :zoom="zoom"
                     :bearing="bearing" :tilt="tilt" :maxZoom="21" :minZoom="6"
                     :padding="padding" @mapReady="mapReady"
                     @markerSelect="onMarkerSelect($event)"></MapView>
            <TextView row="2" :text="labelText" editable="false"></TextView>
            <Button row="3" text="open modal" @tap="openModal" padding="10" marginTop="10"/>

        </GridLayout>

    </Page>
</template>

<script>
    import * as utils from "~/shared/utils";
    import SelectedPageService from "../shared/selected-page-service";
    import CameraModal from './CameraModal'
    const platformModule = require("platform");
    const permissions = require("nativescript-permissions");

    export default {
        data() {
            return {
                saveToGallery: false,
                allowsEditing: false,
                keepAspectRatio: true,
                width: 320,
                height: 240,
                cameraImage: null,
                labelText: "",
                zoom: 15,
                temp_zoom: 15,
                bearing: 10,
                tilt: 0,
                padding: [0, 0, 0, 20],
                center: {
                    lat: 50.467938,
                    lng: 30.502874
                },
                mapView: null,
            }
        },
        mounted() {
            SelectedPageService.getInstance().updateSelectedPage("Home");
            if (this.$isAndroid && platformModule.device.sdkVersion >= 23) {
                permissions.requestPermission(android.Manifest.permission.READ_EXTERNAL_STORAGE, 'The application needs permissions to save and read from storage.')
                    .then(function () {
                        console.log('permission ok');
                    })
                    .catch(function () {
                        alert({
                            title: "App",
                            message: 'The application did not receive permission to access the repository.',
                            okButtonText: "OK"
                        });
                    });
            }
        },
        methods: {
            onMarkerSelect($event){
                console.log($event);
            },
            mapReady(args){
                console.log('mapReady');
                this.mapView = args.object;
                this.mapView.settings.compassEnabled = false;
                if(this.mapView !== null){
                    this.mapView.clear();
                }
                if (this.$isIos) {
                    setTimeout(() => {
                        this.mapView.height = {unit: '%', value: 100}
                    }, 100)
                } else {
                    this.mapView.height = {unit: '%', value: 100}
                }
            },
            onDrawerButtonTap() {
                utils.showDrawer();
            },
            openModal(){
                this.$showModal(CameraModal, {
                    fullscreen: false,
                    animated: true,
                    stretched: true,
                    dimAmount: 0.5
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    // Start custom common variables
    @import '../app-variables';
    // End custom common variables

    // Custom styles
</style>
