<template>
    <v-dialog
        v-model="dialog" 
        :overlay="true"
        
        max-width="300px"
        
    >
        <v-card>
            <v-card-title primary-title class="headline grey lighten-2">
                Ambil / Upload Foto
            </v-card-title>

            <v-card-text>
                <v-layout row wrap>
                    <v-flex xs12>
                        <v-card fill-height flat>
            
                            <v-card-text class="pb-0">
                                <v-card
                                    class="photo_box"
                                    id="photo_box"
                                    elevation="24"
                                >
                                    <div class="photo_inside" id="photo_inside" v-show="camera">
                                        asasdasd ads asd ad ad as da sd a das d sa das d ad as d as dsa ds ad asd sa das d asd as da sd sad as das das d asd sa das d sad as da sd
                                    </div>

                                    <div class="photo_inside" id="photo_inside_2" v-show="!camera">
                                        <v-img
                                        :src="imageUrl"
                                        aspect-ratio="1.34"
                                        class="grey lighten-2 elevation-2"
                                        contain
                                        >
                                        <!-- <img :src="imageUrl" height="150" v-if="imageUrl"/> -->
                                    </div>
                                </v-card>
                                <v-btn color="success" block @click="snap_photo" v-show="camera">Ambil Foto</v-btn>
                                <v-btn color="orange" dark block @click="camera = true" v-show="!camera">Gunakan Kamera</v-btn>

                                <v-divider>xxxx</v-divider>

                                <v-flex xs12 class="text-xs-center">
                                    atau
                                </v-flex>
                                <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
                                    
                                    <v-text-field label="Pilih Gambar" hide-details @click='pickFile' v-model='imageName' prepend-icon='attach_file' class="mt-2"></v-text-field>
                                    <input
                                        type="file"
                                        style="display: none"
                                        ref="image"
                                        accept="image/*"
                                        @change="onFilePicked"
                                    >
                                </v-flex>

                                <v-flex xs12>
                                    <v-btn color="success" block @click="upload" :disabled="camera" :dark="!camera">Simpan</v-btn>
                                </v-flex>
                            </v-card-text>

                        </v-card>
                    </v-flex>
                    
                </v-layout>
            </v-card-text>

            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                    color="primary"
                    flat
                    @click="dialog = false"
                >
                    Tutup
                </v-btn>
            </v-card-actions>

        </v-card>
        
        
    </v-dialog>
</template>

<style>
.photo_box {
    overflow-x: hidden;
}

.photo_inside {
    /* position: absolute;
    top: 0;
    left: 0; */
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#photo_inside_2 {
    min-height: 201px;
}
</style>

<script>
module.exports = {
    data () {
        return {
            title: "Image Upload",
            imageName: '',
            imageUrl: '',
            imageFile: '',
            camera: true
        }
    },

    computed : {
        dialog : {
            get () { return this.$store.state.photo.dialog_photo },
            set (v) { this.$store.commit('photo/update_dialog_photo', v) }
        }
    },

    methods : {
        snap_photo() {
            var str = this.$store
            Webcam.snap(function(data_uri) {
                // document.getElementById('photo_result').innerHTML = '<img src="'+data_uri+'"/>';
                // console.log(data_uri)
                str.commit('photo/update_photo_64', data_uri)
                str.dispatch('photo/upload')
            })
            delete str
        },

        pickFile () {
            this.$refs.image.click ()
        },
		
		onFilePicked (e) {
            this.camera = false
            console.log(this.camera)
			const files = e.target.files
			if(files[0] !== undefined) {
				this.imageName = files[0].name
				if(this.imageName.lastIndexOf('.') <= 0) {
					return
				}
				const fr = new FileReader ()
				fr.readAsDataURL(files[0])
				fr.addEventListener('load', () => {
					this.imageUrl = fr.result
					this.imageFile = files[0] // this is an image file that can be sent to server...
                })
                
                
			} else {
				this.imageName = ''
				this.imageFile = ''
				this.imageUrl = ''
			}
        },
        
        upload () {
            this.$store.commit('photo/update_photo_64', this.imageUrl)
            this.$store.dispatch('photo/upload')
        }
    },

    watch : {
        dialog (n, o) {
            if (n == true) {
                this.camera = true
                Webcam.set({
                    width: 268,
                    height: 201,
                    image_format: 'jpeg',
                    jpeg_quality: 90,
                    dest_width: 640,
                    dest_height: 480
                });
                Webcam.attach( '#photo_inside' );
            } else {
                Webcam.reset()
            }
        },

        camera (n, o) {
            if (n == true) {
                this.imageName = ''
				this.imageFile = ''
                this.imageUrl = ''
                
                Webcam.set({
                    width: 268,
                    height: 201,
                    image_format: 'jpeg',
                    jpeg_quality: 90,
                    dest_width: 640,
                    dest_height: 480
                });
                Webcam.attach( '#photo_inside' );
            } else {
                Webcam.reset()
            }
        }
    }
}
</script>
