<template>
<div>
	<split-layout>
		<template slot="header">{{ __('Import', 'ml-slider') }}</template>
		<template slot="description">
			{{ __('Easily import slideshows generated by MetaSlider. This requires a file generated from the Export tab.', 'ml-slider') }}
		</template>
		<template slot="fields">
			<file-button name="import" accept=".json" @loaded="loadSlideshowsFromFile" :disabled="processing">
				<template slot="header">{{ __('Load slideshows', 'ml-slider') }}</template>
				<template slot="description">{{ sprintf(__('If you have an export file, you may upload it here to be processed. Information about each slideshow will be presented below. You will be able to confirm before importing.', 'ml-slider'), slideshowsToImport) }}</template>
				<template v-if="importing" slot="button">{{ __('Importing... Please wait', 'ml-slider') }}</template>
				<template v-else-if="processing" slot="button">{{ __('Processing...', 'ml-slider') }}</template>
				<template v-else slot="button">
					<svg class="w-5 -ml-1 pr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                    </svg>
                    {{ __('Upload file', 'ml-slider') }}
				</template>
			</file-button>
		</template>
	</split-layout>
	<split-layout
		v-if="Object.keys(slideshowsList).length"
		:loading="importing || processing"
		class="missing-image-wrap"
		>
		<template slot="header">{{ __('Slideshows', 'ml-slider') }}</template>
		<template slot="description">
			<transition name="settings-fade" mode="in-out">
				<div v-if="environment === 'local'">
					{{ __("The import file appears to have been generated on a local development site. Some images or videos may not be imported due to limitations in the WordPress upload system.", 'ml-slider') }}
				</div>
				<div v-else-if="environment === 'unknown'">
					{{ __('The import file was created with a previous version of MetaSlider. Please make sure you are using the latest version of MetaSlider in the source website, generate the import file again and upload it here.', 'ml-slider') }}
				</div>
				<div v-else-if="missingImages.length">
					{{ __("Some images are missing. Please ensure all images are accessible from the source website before importing.", 'ml-slider') }}
				</div>
				<div v-else>
					{{ __('Click the Import button to begin the import process.', 'ml-slider') }}
				</div>
			</transition>
		</template>
		<template slot="fields">
			<div class="mb-10">
				<action-button
					@click="importSlideshows"
					:disabled="!slideshowsToImport.length">
					<template slot="header">{{ sprintf(__('Import %s slideshows', 'ml-slider'), slideshowsToImport.length) }}</template>
					<template slot="description">{{ __('Select the slideshows you wish to import below. Then click here to import them.', 'ml-slider') }}</template>
					<template slot="button">{{ __('Import', 'ml-slider') }}</template>
				</action-button>
				<switch-single-input
					v-if="Object.keys(slideshowsList).length > 10"
					:value="slideshowsToImport.length > 0"
					@change="toggleSlideshowsToImport($event)">
					<template slot="header">{{ __('Toggle all slideshows') }}</template>
					<template slot="description">{{ __('Select or deselect all slideshows') }}</template>
				</switch-single-input>
			</div>
			<template v-for="(slideshow, index) in slideshowsList">
				<switch-single-input
					:key="index"
					v-model="slideshowsListSelection[index]"
					class="transition-all duration-150 ease-linear"
					:style="{ filter: slideshowsListSelection[index] ? 'none' : 'grayscale(1)' }">
					<template slot="header">
						<input
							:value="slideshow.title || 'Title not found'"
							class="-ml-2 hover:bg-gray-lighter hover:border border-gray-light px-2 py-1 text-lg"
							@change="slideshowsList[index].title = $event.target.value">
					</template>
					<template slot="description">
						<div v-if="slideshow.slides" class="pl-3 inline-flex flex-row-reverse justify-end relative z-0 overflow-hidden">
							<div
								v-for="slide in slideshow.slides"
								:key="slide.original_id"
								class="relative -ml-3 z-30 inline-block h-12 w-12 text-white border border-gray-light shadow-solid rounded-full">
								<img
									v-if="slide.image_url && slide.imageExists && environment !== 'local'" :src="slide.image_url"
									class="gradient border border-white rounded-full h-full inline-block"
									alt="">
								<div
									v-else-if="'post_feed' === slide.meta['ml-slider_type']"
									class="bg-blue border border-blue flex items-center justify-center text-lg text-white rounded-full h-full tipsy-tooltip-top"
									:original-title="__('Post Feed slide', 'ml-slider')"
									:title="__('Post Feed slide', 'ml-slider')">
									P
								</div>
								<div
									v-else-if="'external' === slide.meta['ml-slider_type']"
									class="bg-blue-light border border-blue-light flex items-center justify-center text-lg text-white rounded-full h-full tipsy-tooltip-top"
									:original-title="__('External slide', 'ml-slider')"
									:title="__('External slide', 'ml-slider')">
									E
								</div>
								<div
									v-else-if="'woocommerce' === slide.meta['ml-slider_type']"
									class="border flex items-center justify-center text-lg text-white rounded-full h-full tipsy-tooltip-top"
									style="background:#873eff;border-color:#873eff;"
									:original-title="__('WooCommerce slide', 'ml-slider')"
									:title="__('WooCommerce slide', 'ml-slider')">
									WC
								</div>
								<div
									v-else-if="'folder' === slide.meta['ml-slider_type']"
									class="border flex items-center justify-center text-lg text-white rounded-full h-full tipsy-tooltip-top"
									style="background:#0f95da;border-color: #0f95da;"
									:original-title="__('Image Folder slide', 'ml-slider')"
									:title="__('Image Folder slide', 'ml-slider')">
									F
								</div>
								<div
									v-else-if="'local_video' === slide.meta['ml-slider_type']"
									class="bg-blue-light border border-blue-light flex items-center justify-center text-lg text-white rounded-full h-full tipsy-tooltip-top"
									:original-title="__('Local Video slide', 'ml-slider')"
									:title="__('Local Video slide', 'ml-slider')">
									LV
								</div>
								<div
									v-else-if="'external_video' === slide.meta['ml-slider_type']"
									class="bg-blue-light border border-blue-light flex items-center justify-center text-lg text-white rounded-full h-full tipsy-tooltip-top"
									:original-title="__('External Video slide', 'ml-slider')"
									:title="__('External Video slide', 'ml-slider')">
									EV
								</div>
								<div
									v-else-if="'custom_html' === slide.meta['ml-slider_type']"
									class="border flex items-center justify-center text-lg text-white rounded-full h-full tipsy-tooltip-top"
									style="background:#e44d26;border-color:#e44d26;"
									:original-title="__('Custom HTML slide', 'ml-slider')"
									:title="__('Custom HTML slide', 'ml-slider')">
									&lt;/&gt;
								</div>
								<div
									v-else 
									:style="{ 'animation-delay': [(500 * index * Math.random()) + 'ms'] }"
									class="gradient border border-white rounded-full h-full flex justify-center items-center text-red tipsy-tooltip-top"
									:original-title="sprintf(__('Image not found<br>%s', 'ml-slider'), slide.image)"
									:title="sprintf(__('Image not found<br>%s', 'ml-slider'), slide.image)">
									x
								</div>

							</div>
							<div class="relative -ml-3 z-50 inline-block bg-gray-lighter flex items-center justify-center text-lg text-gray-dark h-12 w-12 rounded-full shadow-solid border border-gray-light">
								{{ slideshow.slides.length }}
							</div>
						</div>
						<div v-else>
							{{ __('No slides found', 'ml-slider') }}
						</div>
					</template>
				</switch-single-input>
			</template>
		</template>
	</split-layout>
</div>
</template>

<script>
import { Slideshow } from '../../api'
import Swal from 'sweetalert2'
import { default as SplitLayout } from '../layouts/_split'
import { default as SwitchSingle } from '../inputs/_switchSingle'
import { default as ActionButton } from '../inputs/_actionButton'
import { default as FileButton } from '../inputs/_fileButton'
import { default as fileDownload } from 'js-file-download'
import { DateTime  } from "luxon"
export default {
	components: {
		'split-layout' : SplitLayout,
		'switch-single-input' : SwitchSingle,
		'file-button' : FileButton,
		'action-button' : ActionButton,
	},
	computed: {
		slideshowsToImport() {
			if (!Object.keys(this.slideshowsListSelection).length) return []
			let ids = []
			Object.keys(this.slideshowsListSelection).forEach(slideshowId => {
				this.slideshowsListSelection[slideshowId] && ids.push(slideshowId)
			})
			return ids
		}
	},
	watch: {
		missingImages(newVal) {
			console.log('Missing images:', newVal);
		}
	},
	props: {},
	data() {
		return {
			metadata: '',
			slideshowsList: {},
			slideshowsListSelection: {},
			processing: false,
			importing: false,
			userSawProcessingImagesMessage: false,
			environment: '',
			missingImages: []
		}
	},
	created() {},
	mounted() {},
	methods: {
		loadSlideshowsFromFile(data) {
			this.slideshowsList = {}
			this.slideshowsListSelection = {}

			// TODO: test with uploading different export file

			if (!data) {
				this.notifyWarning(
					'metaslider-importing-slideshows-bad-data',
					this.__('The data in this file does not appear to be valid.', 'ml-slider'), true)
			}
			this.processing = true

			try {
				data = JSON.parse(data)
				this.metadata = data.metadata
				delete data.metadata
				this.slideshowsList = data

				this.environment = this.metadata.environment ?? 'unknown';

				// Check for missing images
				this.missingImages = [];

				Object.values(this.slideshowsList).forEach(async (slideshow) => {
					if (slideshow.slides) {
						for (const slide of slideshow.slides) {
							if (slide.image_url) {
								const exists = await this.imageExists(slide.image_url);
								// Mark each slide as valid/invalid
								this.$set(slide, 'imageExists', exists);
								if (!exists) {
									this.missingImages.push(slide.image_url);
								}
							} else {
								this.$set(slide, 'imageExists', false);
							}
						}
					}
				});

				const slideshowsListSelection = {}
				for (const [key, slideshow] of Object.entries(this.slideshowsList)) {
					slideshowsListSelection[key] = true
				}
				this.slideshowsListSelection = slideshowsListSelection

				this.notifySuccess(
					'metaslider/all-slideshows-from-file-loaded',
					this.sprintf(
						this.__('Found %s slideshows', 'ml-slider'),
						Object.keys(this.slideshowsList).length
					), true)
			} catch (error) {
				this.slideshowsList = {}
				this.notifyError('metaslider/all-slideshows-from-file-error', error.message, true)
			}
			this.processing = false
		},
		async importSlideshows() {
			if (!this.slideshowsToImport.length) {
				this.notifyWarning(
					'metaslider-importing-slideshows-no-slideshows',
					this.__('You have no slideshows to import', 'ml-slider'), true)
			}

			this.importing = true
			this.processing = true

			const slideshowData = []
			this.slideshowsToImport.forEach(key => {
				slideshowData.push(this.slideshowsList[key])
			})

			// If export file comes from a local environment, give the user information and the choice to proceed
			let popupText = '';
			if (this.environment === 'local') {
				popupText = this.__('Export file is from a local site. Exporting from a local site may cause issues during import. This is because the images and videos need to be accessible from a live server.', 'ml-slider');
			}
			if (this.missingImages.length) {
				popupText = '<br><br>' + this.__('Some images are missing. Please ensure all images are accessible from the source website before importing.', 'ml-slider');
			}

			const readyToImport = this.environment === 'local' || this.missingImages.length ? await Swal.fire({
				title: this.__('Important!', 'ml-slider'),
				html: '<p class="text-base">' + popupText + '</p>',
				confirmButtonText: this.__('Continue', 'ml-slider'),
				showCancelButton: true,
				icon: 'warning',
				iconHtml: '<div class="dashicons dashicons-warning" style="transform: scale(3.5);"></div>',
				customClass: 'shadow-lg',
			}) : { value: true }

			// If the user clicked cancel
			if (!readyToImport.value) {
				this.importing = false
				this.processing = false
				return
			}

			this.notifyInfo(
				'metaslider-importing-slideshows',
				this.sprintf(
					this.__('Importing %s slideshows... This may take a minute', 'ml-slider'),
					this.slideshowsToImport.length
				), true)

			Slideshow.import(JSON.stringify([...slideshowData])).then(response => {
				this.notifySuccess(
					'metaslider-importing-slideshows-success',
					this.__('Import successful', 'ml-slider'), true)
			}).catch(error => {
				this.notifyError('metaslider/import-error', error, true)
			}).finally(() => {
				this.importing = false
				this.processing = false
			})
		},
		fileDate() {
			return DateTime.fromISO(new Date((this.metadata.date)).toISOString()).toFormat('yyyy/MM/dd')
		},
		randomBgColor() {
			const bgColors = ['bg-gray-dark', 'bg-gray-light', 'bg-gray-lighter', 'bg-gray-lightest']
			return bgColors[Math.floor(Math.random() * bgColors.length)]
		},
		slidesMissingImages(slideshow) {
			return this.slideshowsList[slideshow].slides.filter(slide => {
				if (['post_feed', 'external'].indexOf(slide.meta['ml-slider_type']) > -1) return false
				return !slide.id
			})
		},
		toggleSlideshowsToImport(state) {
			Object.keys(this.slideshowsListSelection).forEach(slideshow => this.slideshowsListSelection[slideshow] = state)
		},
		async imageExists(url) {
			return new Promise(resolve => {
				const img = new window.Image();
				img.onload = () => resolve(true);
				img.onerror = () => resolve(false);
				img.src = url;
			});
		}
	}
}
</script>
<style scoped>
.gradient {
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f1f1f1;
    background: linear-gradient(to right, #f1f1f1 8%, #f8fafc 38%, #f1f1f1 54%);
    background-size: 1000px 640px;
    position: relative;
}
@keyframes placeHolderShimmer {
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}
</style>
