<template>
	<v-dialog 
		ref="image_ref"
		v-model="image_dialog" 
		:return-value.sync="image_val"
		max-width="750px" 
		persistent
	>
		<template #activator="{ on }">
			<div class="text-center pa-1 fill-height fill-weight" :style="'min-height:'+minHeight">
				<div v-if="value" class="relative fill-height fill-weight">
					<v-img 
						class="radius-05" 
						:src="value"
						:aspect-ratio="ratio" height="100%"
					></v-img>
					<v-progress-linear
						v-if="loadingProgress"
						class="absolute"
						height="6px"
						:indeterminate="loadingProgress == 100"
						:value="loadingProgress"
						style="bottom: 0px; z-index: 5;"
					></v-progress-linear>
					<v-btn
						v-if="!hideEditBtn"
						class="absolute background elevation-2"
						style="top: -6px;right: 18px; z-index: 5;"
						x-small
						icon
						v-on="on"
					>
						<v-icon x-small>mdi-pencil</v-icon>
					</v-btn>
					<v-btn
						class="absolute background elevation-2"
						style="top: -6px;right: -6px; z-index: 5;"
						x-small
						icon
						@click="clearInput() "
					>
						<v-icon x-small>mdi-delete</v-icon>
					</v-btn>
				</div>
				<div
					v-else 
					class="background clickable container justify-center radius-05 px-12 py-3 fill-height fill-weight"
					style="border: 1px solid #666;"
					v-on="on"
				>
					<div>
						<div><v-icon>mdi-upload</v-icon></div>
						<div class="caption">Upload Image <div class="font-italic"> {{ ratio == 16/9 ? "(ratio 16:9)" : "(resolution 1024x1280)" }} </div></div>
					</div>
				</div>
				<div class="text-left font-italic">
				</div>
				<div class="caption error--text text-left">
					<div v-if="errorMessages">{{ errorMessages[0] }}</div>
				</div>
			</div>
		</template>
		<vuetify-image-clipper
			v-model="image_val"
			:ratio="ratio" 
			@input="computed_file_size()" 
			@reset="file_size = null"
		>
			<template #extra_info>
				<div v-if="file_size" class="caption">size: {{ file_size }} MB</div>
			</template>
			<div class="body-2 font-italic">*Scroll to zoom</div>
			<v-spacer></v-spacer>
			<v-btn text color="error" @click="image_dialog = false">Cancel</v-btn>
			<v-btn 
				text color="primary" :disabled="!image_val"
				@click="saveImage()"
			>
				Save
			</v-btn>
		</vuetify-image-clipper>
	</v-dialog>
</template>

<script>
import VuetifyImageClipper from "vuetify-image-clipper"
import "vuetify-image-clipper/dist/v-image-clipper.css"
export default{
	components:{
		VuetifyImageClipper
	},
	props:{
		value: {
			type: String,
			required: false,
			default : ''
		},
		loadingProgress: {
			type: [Number, Boolean],
			required: false,
			default : 0
		},
		errorMessages:{
			type: Array,
			required: false,
			default : ()=>{
				return []
			}
		},
		minHeight:{
			type: String,
			default: 'auto',
		},
		hideEditBtn:{
			type: Boolean,
			default: false,
		},
		ratio:{
			type: Number,
			default: 16/9,
		}
	},
	data(){
		return {
			image_val : null,
			image_dialog : false,
			file_size : null,
		}
	},
	methods:{
		saveImage(){
			this.image_dialog = false
			this.$emit('input',this.image_val)
		},
		clearInput(){
			this.$emit('clearInput')
		},
		computed_file_size(){
			this.file_size = null
			if(this.image_val){
				let file = this.dataURLtoBlob(this.image_val)
				if(file){
					this.file_size = ( file.size / (1024*1024)).toFixed(2);
				}
			}
		},
		dataURLtoBlob(dataURL){
			var blobBin = atob(dataURL.split(',')[1]);
			var array = [];
			for(var i = 0; i < blobBin.length; i++) {
				array.push(blobBin.charCodeAt(i));
			}
			var file = new Blob([new Uint8Array(array)], {type: 'image/png'});
			return file
		},
		get_broken_img(){
			return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAA6RJREFUeF7tmy1z6kAYhbcOXLE4cNiCQwISSS2OSiT9CSDBgQOLRAISVyw4cJWlrnX3zu5MmITpJbtJJjlv74lhMuTj9DzzdMkmefj4+PijuMA08EAgMCxMEALB4kEgYDwIhEDQGgDLwzGEQMAaAItDQwgErAGwODSEQMAaAItDQwgErAGwODSEQMAaAItDQwgErAGwODSEQMAaAItDQwgErAGwODSEQMAaAItDQwgErAGwODSEQMAaAItDQwgk+QZOp5M5aLlcTv7gKR9RvCGLxUIdDgdT29PTk3p+fk65wmRPJxrIer1W2+020Eij0VCtVivZllI8mlggX19fajQaqe/v70BduVxODQYDlc/nU6wxuVOJBeK34/Hx0TTy+flpPiVbIhLIrR2dTseAWC6X5lOyJSKB3Nrx+vpqQAyHQ/GWiAPykx3VatUA2e/34i0RB+RfdnjDqnRLRAG5Z4cHRLolooCE2fEbLBEDxMaO32CJGCC2dki3RAQQFzukWyICiKsdki2BBxLFDsmWwAMJs2O1WqndbmcY1Ot11W63AzN90q5LoIGE2aHvg+j7If6l1+sFblRJuy6BBhJmh+39EEmWwAIJs0NbYQtEkiWwQMLscAEiaSYYEoiNHa5ApFgCCcTGDlcgUiyBA2JrRxQgEiyBA2JrRxQgEiyBAuJiR1Qg6JZAAXGxIyoQdEtggLjaoYu9XC5qPB5fn83ST5v0+31VKBQCV++3K8iWwABxtcMrWUN5e3szq7VaLRQG+kwwBJAodtxVwOJLVEsggES1w6L3u5sgznFlDiSuHfpVhM1mY4pvNptOryQgWpI5kDh2vL+/q8lkErBAP2gdNqj7d0CzJFMgce2wne29938LzZJMgcSxQ5fsL9MrXT947T1aajvGIFmSGZC4dnhlT6dTdT6fzWqpVFIvLy+2HK7bIVmSGZC4dvhb12OJXorFojMMtOuSTIAkZUfk9n/YEcWSTIDon6qz2exaC8rbs97bvDrY7cMSScK/dywIIGn9sS7n+a+A6GLm87k6Ho8uHaW2baVSUd1uN7Xz+U+UiSFeAD0Y375Fm0kLvpPqGeM4Pw7i5s8USNzwv3F/AgGjSiAEAtYAWBwaQiBgDYDFoSEEAtYAWBwaQiBgDYDFoSEEAtYAWBwaQiBgDYDFoSEEAtYAWBwaQiBgDYDFoSEEAtYAWBwaQiBgDYDFoSEEAtYAWBwaQiBgDYDFoSEEAtYAWBwaAgbkLz1H5RbOQSuJAAAAAElFTkSuQmCC"
		}
	}
}
</script>