<template>
<div>
	<split-layout>
		<template slot="header">{{ __('Import', 'ml-slider') }}</template>
		<template slot="description">
			{{ __('Easily import slideshows generated by MetaSlider Slideshow. 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 Slideshow. Please make sure you are using the latest version of MetaSlider Slideshow 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-if="'html_overlay' === 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:#6FAF4F;"
									:original-title="__('Layer slide', 'ml-slider')"
									:title="__('Layer slide', 'ml-slider')">
									LS
								</div>
								<div
									v-else-if="'post_images' === 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:#780000;"
									:original-title="__('Post Images', 'ml-slider')"
									:title="__('Post Images', 'ml-slider')">
									PI
								</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>
