/* =======================================
   TEMPLATES
   ======================================= */

import { Blocker } from '../../../../../../atum-stock-manager-for-woocommerce/assets/js/src/components/_blocker';
import { default as ListTableGlobals } from '../../../../../../atum-stock-manager-for-woocommerce/assets/js/src/components/list-table/_globals';
import ExportSettings from '../../config/_export-settings';
import Globals from './_globals';
import TemplatesList from './_templates-list';

export default class Templates {
	
	$list: JQuery;
	selectedTemplateName: string = '';

	constructor(
		private settings: ExportSettings,
		private globals: Globals
	) {
		
		this.$list = this.globals.$wrapper.find('.templates-list');
		this.globals.tooltip.addTooltips(this.$list);
		
		// Load list table's dependencies.
		let listTableGlobals = new ListTableGlobals(this.settings);
		
		new TemplatesList(this.settings, listTableGlobals, this.globals.tooltip);
		
		this.bindEvents();
	
	}
	
	bindEvents() {
	
		this.$list
		
			// Delete template.
			.on('click', '.template-controls .delete-template', (evt: JQueryEventObject) => {
				evt.preventDefault();
				this.deleteTemplate($(evt.currentTarget));
			})
		
			// Export template.
			.on('click', '.template-controls .template-export', (evt: JQueryEventObject) => {
				evt.preventDefault();
				this.globals.tooltip.destroyTooltips(this.globals.$contentWrapper);
				this.globals.runExport( {
					template_id: $(evt.currentTarget).data('id')
				} );
				this.globals.tooltip.addTooltips(this.globals.$contentWrapper);
			})
		
			// Show files popup.
			.on('click', '.show-files', (evt: JQueryEventObject) => {
				evt.preventDefault();
				const $button: JQuery = $(evt.currentTarget);
				this.showExportedFiles($button.data('id'), $button);
			});
		
		// Delete file from the exported files list.
		$('body').on('click', '.file-actions .delete-file', (evt: JQueryEventObject) => {
			evt.preventDefault();
			this.deleteFile($(evt.currentTarget));
		});
	
	}
	
	/**
	 * Delete a template through the corresponding action button
	 *
	 * @param {JQuery} $button
	 */
	deleteTemplate($button: JQuery) {
		
		this.globals.swal({
			title              : this.settings.get('areYouSure'),
			text               : this.settings.get('removeTemplate'),
			type               : 'warning',
			showCancelButton   : true,
			confirmButtonText  : this.settings.get('continue'),
			cancelButtonText   : this.settings.get('cancel'),
			reverseButtons     : true,
			allowOutsideClick  : false
		})
		.then( () => {
			
			$.ajax({
				url       : window['ajaxurl'],
				dataType  : 'json',
				method    : 'post',
				data      : {
					action: 'aep_delete_template',
					token : this.settings.get('nonce'),
					id    : $button.data('id'),
				},
				beforeSend: () => {
					this.globals.tooltip.destroyTooltips(this.$list);
					Blocker.block(this.$list);
				},
				success   : (response: any) => {
					
					if (response.success === true) {
						$button.closest('tr').remove();
						location.reload(); // TODO: THIS SHOULD BE RELOADED THROUGH AN AJAX CALL.
					}
					
					Blocker.unblock(this.$list);
					
				},
			});
			
		})
		.catch(this.globals.swal.noop);
	
	}
	
	/**
	 * Show exported files' popup
	 *
	 * @param {number} templateId
	 * @param {JQuery} $button
	 */
	showExportedFiles(templateId: number, $button: JQuery = null) {
		
		if ($button) {
			this.selectedTemplateName = $button.closest('tr').find('td.column-name').text();
		}
		
		this.globals.tooltip.destroyTooltips(this.globals.$contentWrapper);
		
		this.globals.swal({
			title            : this.selectedTemplateName,
			html             : '<div id="exported-files" class="exported-files"></div>',
			showCancelButton : false,
			showConfirmButton: false,
			showCloseButton  : true,
			onOpen           : () => {
				
				const $exportedFiles: JQuery = $('#exported-files');
				
				$.ajax({
					url       : window['ajaxurl'],
					dataType  : 'json',
					method    : 'post',
					data      : {
						action     : 'aep_get_exported_files',
						token      : this.settings.get('nonce'),
						template_id: templateId,
					},
					beforeSend: () => $exportedFiles.html('<div class="atum-loading" />'),
					success   : (response: any) => {
						
						if (response.success === true) {
							$exportedFiles.html(response.data);
							this.globals.tooltip.addTooltips($exportedFiles);
						}
						
					},
				});
				
			},
			onClose          : () => {
				
				if ($button) {
					(<any>$button).blur().tooltip('hide');
				}
				
				this.globals.tooltip.addTooltips(this.globals.$contentWrapper)
			},
		})
		.catch(this.globals.swal.noop);
		
	}
	
	/**
	 * Delete exported file from server
	 *
	 * @param {JQuery} $button
	 */
	deleteFile($button: JQuery) {
		
		const templateId: number = $button.data('template-id');
		
		this.globals.tooltip.destroyTooltips($button.closest('.swal2-container'));
		
		this.globals.swal({
			title              : this.settings.get('areYouSure'),
			text               : this.settings.get('removeFile'),
			type               : 'warning',
			showCancelButton   : true,
			confirmButtonText  : this.settings.get('continue'),
			cancelButtonText   : this.settings.get('cancel'),
			reverseButtons     : true,
			showLoaderOnConfirm: true,
			allowOutsideClick  : () => {
				return !this.globals.swal.isLoading();
			},
			preConfirm         : () => {
				
				// Try to remove the file.
				return new Promise( (resolve: Function, reject: Function) => {
					
					$.ajax({
						url       : window['ajaxurl'],
						dataType  : 'json',
						method    : 'post',
						data      : {
							action  : 'aep_delete_exported_file',
							token   : this.settings.get('nonce'),
							file    : $button.data('file'),
							template: templateId,
						},
						success   : (response: any) => {
							
							if (response.success === true) {
								resolve(response.data);
							}
							else {
								reject(response.data);
							}
							
						},
					});
					
				});
				
			}
		})
		.then( (message: string) => {
			
			this.globals.swal({
				title            : this.settings.get('success'),
				type             : 'success',
				text             : message,
				confirmButtonText: this.settings.get('ok')
			})
			// Show the template files list again.
			.then( () => this.showExportedFiles(templateId) );
			
		},
		(dismiss: string) => this.showExportedFiles(templateId) )
		.catch(this.globals.swal.noop);
	
	}

}