<template>
	<div>
		<v-card class="radius-10">
			<v-card-title>
				<span class="headline">{{ (action == 'edit') ? 'Edit Locker Guide Video/Image' : 'New Locker Guide Video/Image' }}</span>
			</v-card-title>
			<v-divider class="mb-2"></v-divider>
			<v-card-text class="py-4">
				<v-row dense>
					<v-col cols="12" v-if="typeId == VIDEO_TYPE">
						<v-row dense>
							<v-col cols="12" md="12">
								<v-menu
									ref="menu"
									v-model="menu2"
									:close-on-content-click="false"
									:nudge-right="40"
									:return-value.sync="time"
									transition="scale-transition"
									offset-y
									max-width="290px"
									min-width="290px"
								>
									<template v-slot:activator="{ on, attrs }">
										<v-text-field
											v-model="time"
											label="Publish time"
											dense
											readonly
											v-bind="attrs"
											v-on="on"
											:error-messages="errors.time"
										></v-text-field>
									</template>
									<v-time-picker
										v-if="menu2"
										v-model="time"
										full-width
										@click:minute="$refs.menu.save(time)"
									></v-time-picker>
								</v-menu>
							</v-col>
						</v-row>
					</v-col>
					<v-col cols="12" md="12">
						<div v-if="typeId == IMAGE_TYPE">
							<div class="pl-2 font-weight-bold">
								<span>Image :</span>
							</div>
							<div class="caption pl-2 font-italic">
								<span>*Size limit: 5MB.</span>
							</div>
							<div class="pa-2">
								<ImageInput
									ref="media_input"
									v-model="form.media"
									:loading-progress="upload_progress"
									:error-messages="errors.media"
									:ratio="aspectRatio"
									@input="checkSaveImage()"
								></ImageInput>
							</div>
						</div>
						<div v-else>
							<div class="pl-2 font-weight-bold">
								<span>Video :</span>
							</div>
							<div class="caption pl-2 font-italic">
								<span>*Size limit: 25MB.</span>
							</div>
							<div>
								<v-file-input
									ref="media_input"
									v-model="form.media"
									:loading-progress="upload_progress"
									:error-messages="errors.media"
									accept=".mp4"
									label="Video input"
									@input="checkSaveVideo()"
								></v-file-input>
							</div>
						</div>
					</v-col>
				</v-row>
			</v-card-text>
			<v-card-actions>
				<v-spacer></v-spacer>
				<v-btn 
					color="blue darken-1" text title="Cancel" 
					@click="closeDialog()"
				>
					Cancel
				</v-btn>
				<v-btn 
					color="blue darken-1" 
					text title="Save" 
					:loading="submit_loading"
					@click="submitForm(form)"
				>
					Save
				</v-btn>
			</v-card-actions>
		</v-card>
	</div>
</template>

<script>
import ImageInput from '@/js/components/ImageInput'
import { errorHandlerMixin } from "@/js/mixins/ErrorHandlerMixin"
export default{
	components:{
		ImageInput,
	},
	mixins: [ 
		errorHandlerMixin
	],
	props:{
		visible: {
			type: Boolean,
			required: true,
		},
		item: {
			type: Object,
			required: true,
			default: ()=>{
				return {}
			}
		},
		VIDEO_TYPE: {
			type: Number,
			default: ()=>{
				return 2
			}
		},
		IMAGE_TYPE: {
			type: Number,
			default: ()=>{
				return 1
			}
		},
		guideId:{
			type: String,
			default: ()=>{
				return "0"
			}
		},
		typeId:{
			type: Number,
			default: ()=>{
				return 0
			}
		},
		aspectRatio:{
			type: Number,
			default: ()=>{
				return 4/5
			}
		},
		action: {
			type: String,
			required: true,
		},
	},
	data () {
		return {
			form : {},
			errors : {},
			submit_loading : false,
			upload_progress: null,
			time: "00:00",
			menu2: false,
		}
	},
	watch:{
		'item':{
			handler(){
				this.form = this.item
			},
			immediate: true,
		},
		'visible':{
			handler: function (newVal){
				if(!newVal){
					// reset
					this.form = {}
					this.errors = {}
				}
			},
			immediate : true,
		},
	},
	created(){
	},
	methods: {
		initialize(){
			this.closeDialog()
			this.$emit('initialize')
		},
		closeDialog(){
			this.$emit('update:visible',false)
		},
		submitForm(item){
			this.saveModel(item)
		},
		checkSaveImage(){
			if(this.action == 'new'){
				this.errors.image = null
				let file = this.$refs.media_input.dataURLtoBlob(this.form.media)
				if(file.size > (5 * 1024*1024) ){
					this.errors.media = ["Image may not greater than 5mb."]
				}
				return null
			}
		},
		checkSaveVideo()
		{
			let file = this.form.media
			if(file.size > (25 * 1024*1024) ){
				this.errors.media = ["Video may not greater than 25mb."]
			}
			return null
		},
		saveModel(item){
			this.submit_loading = true
			let file = this.form.media
			if(this.typeId == this.IMAGE_TYPE)
				file = this.$refs.media_input.dataURLtoBlob(this.form.media)

			let payload = new FormData();
			payload.append("id", this.guideId);
			payload.append("type_id", this.typeId);
			payload.append("media", file);
			payload.append("time", this.time);

			let progress = (progressEvent) => {
				var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
				this.upload_progress = percentCompleted
			}

			this.$api.uploadLockerGuideMedia(payload, progress).then((res)=>{
				this.$toast.success(res.data.message)
				this.initialize()
			}).catch((err) => {
				this.errors = this.errorHandler_(err, this.action == 'new' ? [] : [ "media" ] )
				if(this.action == 'new'){
					this.initialize()
				}
			}).finally(()=>{
				this.upload_progress = null
				this.submit_loading = false
			})
		},
	}
}
</script>