import SettingsActions from '../actions/SettingsActions.js';
import Maintenance from './MaintenanceManager.js';
import FipamoAdminAPI, { TASK_SYNC_SETTNIGS } from '../../libraries/FipamoAdminAPI.js';
import * as DataEvent from '../../../dash/app/events/DataEvent.js';
import Mailer from '../actions/Mailer.js';
import Notifications from '../ui/Notifications.js';
const notify = new Notifications();
export default class SettingsIndex {
	//--------------------------
	// constructor
	//--------------------------
	constructor() {
		this.processing = false;
		this.start();
		this.admin = new FipamoAdminAPI(null);
		this.mm = new Maintenance(null, null);
	}
	//--------------------------
	// methods
	//--------------------------
	start() {
		let self = this;
		//handle save button
		document.getElementById('save-toggle').addEventListener('click', () =>
			new SettingsActions()
				.getInfo()
				.then(data => {
					notify.alert('Saving Settings', null);
					self.admin.sync(TASK_SYNC_SETTNIGS, data).then(r => {
						if (r.type == DataEvent.SETTINGS_UPDATED) {
							notify.alert(r.message, true);
						} else {
							notify.alert(r.message, true);
						}
					});
				})
				.catch(() => {
					//console.log(err);
				})
		);
		//handle set up image uploads
		document.querySelector('.avatar').addEventListener('click', () => {
			document.getElementById('avatar-upload').click();
		});
		document.querySelector('.background').addEventListener('click', () => {
			document.getElementById('background-upload').click();
		});

		document.getElementById('avatar-upload').addEventListener(
			'change',
			e => {
				self.handleImageUpload(e.target.id, e.target.files);
			},
			false
		);
		document.getElementById('background-upload').addEventListener(
			'change',
			e => {
				self.handleImageUpload(e.target.id, e.target.files);
			},
			false
		);
		//handle api access toggle
		var apiButton = document.getElementById('api-access-toggle');
		var apiStatus = document.getElementById('api-status');
		apiButton.addEventListener('click', e => {
			e.stopPropagation();
			e.preventDefault();
			if (apiButton.getAttribute('data-enabled') == 'false') {
				apiButton.setAttribute('data-enabled', 'true');
				apiStatus.innerHTML = 'API ACCESS IS ENABLED';
			} else {
				apiButton.setAttribute('data-enabled', 'false');
				apiStatus.innerHTML = 'API ACCESS IS DISABLED';
			}
		});

		//handle dynamic page rendering
		var dynamicRenderButton = document.getElementById('dynamic-render-toggle');
		var dynamicRenderStatus = document.getElementById('dynamic-render-status');
		dynamicRenderButton.addEventListener('click', e => {
			e.stopPropagation();
			e.preventDefault();
			if (dynamicRenderButton.getAttribute('data-enabled') == 'false') {
				dynamicRenderButton.setAttribute('data-enabled', 'true');
				dynamicRenderStatus.innerHTML = 'DYNAMIC PAGE RENDERING';
			} else {
				dynamicRenderButton.setAttribute('data-enabled', 'false');
				dynamicRenderStatus.innerHTML = 'STATIC PAGE RENDERING';
			}
		});

		//handle site reset
		document.getElementById('reset-to-default').addEventListener('click', e => {
			if (
				confirm(
					'You are about to restore the site to its default state!\n' +
						'This cannot be undone, so please confirm.'
				)
			) {
				this.mm
					.reset()
					.then(r => {
						if (r.type == 'COOL') {
							window.location = '/';
						} else {
							notify.alert(r.message, true);
						}
					})
					.catch(() => {
						//console.log(err)
					});
			} else {
				// Do nothing!
			}
		});

		//handle tabs
		let tabBtn = document.querySelectorAll('.tab-button');
		let tabs = document.querySelectorAll('.section-tab');
		for (i = 0, length = tabBtn.length; i < length; i++) {
			tabBtn[i].addEventListener('click', e => {
				let tab = 'site-' + e.target.id;
				for (i = 0, length = tabs.length; i < length; i++) {
					let tabID = tabs[i].id;
					if (tab == tabID) {
						tabs[i].classList.add('show');
						tabs[i].classList.remove('hide');
					} else {
						tabs[i].classList.add('hide');
						tabs[i].classList.remove('show');
					}
				}
			});
		}

		document
			.getElementById('send-test-mail')
			.addEventListener('click', e => this.handleTestMail(e));
		document
			.getElementById('publish-pages')
			.addEventListener('click', e => this.handlePublished(e));
		//handle page render on save toggle
		document
			.getElementById('render-toggle')
			.addEventListener('click', e => this.toggleRender(e));
		//handle theme toggle
		let themeBtns = document.querySelectorAll('.theme-select');
		for (var i = 0, length = themeBtns.length; i < length; i++) {
			themeBtns[i].addEventListener('click', e => this.handleThemes(e));
		}
		//handle mail options
		let mailBtn = document.querySelectorAll('.mail-option');
		for (i = 0, length = mailBtn.length; i < length; i++) {
			mailBtn[i].addEventListener('click', e => this.handleMailOptions(e));
		}
		//handle backup from settings
		document
			.getElementById('create-backup')
			.addEventListener('click', e => this.handleBackup(e));
	}
	//--------------------------
	// event handlers
	//--------------------------
	togglePrivacy(e) {
		e.stopPropagation();
		e.preventDefault();
		if (e.target.getAttribute('data-private') == 'false') {
			e.target.setAttribute('data-private', 'true');
			e.target.innerHTML = 'SITE IS PUBLIC';
		} else {
			e.target.setAttribute('data-private', 'false');
			e.target.innerHTML = 'SITE IS PRIVATE';
		}
	}
	toggleRender(e) {
		e.stopPropagation();
		e.preventDefault();
		let button = document.getElementById('render-toggle');
		if (button.getAttribute('data-render') == 'false') {
			button.setAttribute('data-render', 'true');
			//e.target.innerHTML = 'RENDER PAGES ON SAVE';
		} else {
			button.setAttribute('data-render', 'false');
			//e.target.innerHTML = "DON'T RENDER PAGES ON SAVE";
		}
	}
	handleTestMail() {
		let mailer = new Mailer();
		//mailer.testMail();
		mailer.sendMail('TEST');
	}
	handleThemes(e) {
		e.stopPropagation();
		e.preventDefault();
		let themes = document.querySelectorAll('.theme-select');
		for (var i = 0, length = themes.length; i < length; i++) {
			let theme = e.target.id;
			if (e.target.id == '') {
				theme = e.target.getAttribute('for');
			}
			if (theme == themes[i].id) {
				themes[i].setAttribute('data-enabled', 'true');
				document.getElementById('label-' + themes[i].id).innerHTML =
					'ACTIVE THEME';
			} else {
				themes[i].setAttribute('data-enabled', 'false');
				document.getElementById('label-' + themes[i].id).innerHTML =
					'INACTIVE THEME';
			}
		}
	}
	handleImageUpload(type, files) {
		notify.alert('Uploading Image... ', null);
		let self = this;
		notify.alert('Uploading Image', null);
		let upload = new FormData();
		upload.enctype = 'multipart/form-data';
		upload.append('source', type);
		upload.append('upload_files[]', files[0], files[0].name);

		this.mm
			.filesUpload(files[0].type, upload)
			.then(r => {
				if (type == 'avatar-upload') {
					notify.alert(r.message, true);
					document.querySelector('.avatar').style.background =
						'url(' + r.filePath + ') no-repeat center center / cover';
				} else {
					notify.alert(r.message, true);
					document.querySelector('.background').style.background =
						'url(' + r.filePath + ') no-repeat center center / cover';
				}
			})
			.catch(() => {
				//console.log(err)
			});
	}
	handlePublished(e) {
		if (this.processing) return;
		e.preventDefault();
		e.stopPropagation();
		let self = this;
		let task = { task: 'PUBLISH_ALL' };
		this.processing = true;
		notify.alert('Publishing site...', null);
		this.admin
			.publish(task)
			.then(r => {
				self.processing = false;
				notify.alert(r.message, true);
			})
			.catch(err => {
				self.processing = false;
				notify.alert(err, false);
			});
	}

	handleBackup(e) {
		e.preventDefault();
		e.stopPropagation();
		notify.alert('Creating backup', null);
		this.mm
			.backup()
			.then(r => {
				notify.alert(r.message, true);
			})
			.catch(err => {
				notify.alert(err, false);
			});
	}

	handleReindex(e) {
		if (this.processing) return;
		let self = this;
		e.preventDefault();
		e.stopPropagation();
		let task = { task: 'cleanup pages indexes' };
		this.processing = true;
		notify.alert('Cleaning up page indexes', null);
		this.admin
			.handleReindex(task)
			.then(r => {
				self.processing = false;
				notify.alert(r.message, true);
			})
			.catch(err => {
				self.processing = false;
				notify.alert(err, false);
			});
	}
}