<template>
    <ModalStack dismissEnabled="true" class="start-modal-container">
        <StackLayout class="wrapper">
            <Label :text="count" fontSize="18" textAlignment="center"/>
            <GridLayout rows="auto, auto">
                <FlexBoxLayout row="0" alignItems="center" justifyContent="center" flexWrap="wrap">

                    <Image stretch="aspectFit" :height="height" :width="width" v-if="side_progress.right_front_photo" ref="photo_btn"
                           @tap="getPhoto('side','right_front_photo')"
                           key="right_front_photo" class="photo_start"
                           marginRight="20"
                           :src="side.right_front_photo" />

                    <ActivityIndicator v-else horizontalAlignment="center" margin="10"
                                       color="#1e90ff" busy="true" width="90" height="90"></ActivityIndicator>

                    <Image :height="height" :width="width" v-if="side_progress.left_front_photo"
                           @tap="getPhoto('side','left_front_photo')" key="left_front_photo"
                           class="photo_start" marginRight="20"
                           :src="side.left_front_photo"
                           stretch="aspectFit"/>

                    <ActivityIndicator v-else horizontalAlignment="center" margin="10"
                                       color="#1e90ff" busy="true" width="90" height="90"></ActivityIndicator>

                    <Image :height="height" :width="width" v-if="side_progress.left_back_photo"
                           @tap="getPhoto('side','left_back_photo')" key="left_back_photo"
                           class="photo_start" marginRight="20"
                           :src="side.left_back_photo"
                           stretch="aspectFit"/>

                    <ActivityIndicator v-else horizontalAlignment="center" margin="10"
                                       color="#1e90ff" busy="true" width="90" height="90"></ActivityIndicator>

                    <Image :height="height" :width="width" v-if="side_progress.right_back_photo"
                           @tap="getPhoto('side','right_back_photo')" key="right_back_photo"
                           class="photo_start" marginRight="20"
                           :src="side.right_back_photo"
                           stretch="aspectFit"/>

                    <ActivityIndicator v-else horizontalAlignment="center" margin="10"
                                       color="#1e90ff" busy="true" width="90" height="90"></ActivityIndicator>

                    <Image :height="height" :width="width" v-for="(photo, index) in photos" :key="index"
                           class="photo_start" marginRight="20" :src="photo"
                           stretch="aspectFit"/>
                </FlexBoxLayout>

                <Label row="1" @tap="getPhoto(false, 'new')" v-show="showAddPhotoBtn" :text="'+ Добавить ещё фото'"
                       textWrap="false"
                       class="btn_add_photo"/>
            </GridLayout>
        </StackLayout>
    </ModalStack>
</template>

<script>
    const fileSystemModule = require("tns-core-modules/file-system");
    const imageSourceModule = require("tns-core-modules/image-source");
    import {takePicture, requestPermissions} from "nativescript-camera";

    export default {
        name: "camera_modal",
        data() {
            return {
                count:0,
                side: {
                    right_front_photo: 'res://right_front_photo',
                    left_front_photo: 'res://left_front_photo',
                    left_back_photo: 'res://left_back_photo',
                    right_back_photo: 'res://right_back_photo',
                },
                side_state: {
                    right_front_photo: false,
                    left_front_photo: false,
                    left_back_photo: false,
                    right_back_photo: false,
                },
                side_progress: {
                    right_front_photo: true,
                    left_front_photo: true,
                    left_back_photo: true,
                    right_back_photo: true,
                },
                photos: [],
                show_progress: false,
                width: 90,
                height: 90,
            }
        },

        methods: {

            getPhoto(side, item) {
                requestPermissions().then(
                    () => {
                        takePicture({
                            width: 900,
                            height: 900,
                            keepAspectRatio: true,
                            saveToGallery: true,
                            allowsEditing: false
                        }).then((imageAsset) => {
                                this.side_progress[item] = false;
                                const source = new imageSourceModule.ImageSource();
                                source.fromAsset(imageAsset).then(imageSource => {
                                        const folder = fileSystemModule.knownFolders.documents().path;
                                        const fileName = "picture_" + this.photos.length + ".jpeg";
                                        const path = fileSystemModule.path.join(folder, fileName);
                                        const picSaved = imageSource.saveToFile(path, "jpeg");

                                        if (picSaved) {
                                            console.log('image saved');
                                            setTimeout(()=>{
                                                this.count ++
                                                if (item === 'new') {
                                                    this.photos.push(imageAsset);
                                                } else {
                                                    this.side[item] = imageAsset;
                                                    this.side_state[item] = true;
                                                    this.side_progress[item] = true
                                                }
                                            },1000)
                                        }
                                    },
                                    err => {
                                        console.log("Error -> " + err.message);
                                    });
                            },
                            () => {
                                console.log('permissions rejected')
                            }
                        );
                    });
            }


        },
        computed: {
            showAddPhotoBtn() {
                return this.side.right_front_photo !== 'res://right_front_photo' &&
                    this.side.left_front_photo !== 'res://left_front_photo' &&
                    this.side.left_back_photo !== 'res://left_back_photo' &&
                    this.side.right_back_photo !== 'res://right_back_photo';
            }
        }
    }
</script>

<style>
    .photo_start {
        margin: 10;
    }

    .start-modal-container {
        margin: 15 15 25;
    }

    .btn_add_photo {
        color: #FF6915;
        text-align: center;
        font-size: 14;
        font-family: "Roboto Regular", "sans-serif";
        text-decoration: underline;
        margin-top: 20;
        margin-bottom: 20;
        height: 45;
    }

    .wrapper {
        width: 90%;
        height: 90%;
        background-color: #fff;
    }
</style>
