import SettingsActions from '../actions/SettingsActions';
import FipamoAPI from '../../libraries/FipamoAPI';
import * as DataEvent from '../../../src/com/events/DataEvent';
import Mailer from '../actions/Mailer';
import Notifications from '../ui/Notifications';
const api = new FipamoAPI();
const notify = new Notifications();
const mailer = new Mailer();
export default class SettingsIndex {
	//--------------------------
	// constructor
	//--------------------------
	constructor() {
		this.start();
	}
	//--------------------------
	// methods
	//--------------------------
	start() {
		let self = this;
		//handle save button
		document.getElementById('save-toggle').addEventListener('click', () =>
			new SettingsActions()
				.getInfo()
				.then(data => {
					api.syncSettings(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.getElementById('avatar').addEventListener('click', () => {
			document.getElementById('avatar-upload').click();
		});
		document.getElementById('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 privacy toggle
		document
			.getElementById('privacy-toggle')
			.addEventListener('click', e => this.togglePrivacy(e));
		document
			.getElementById('render-toggle')
			.addEventListener('click', e => this.toggleRender(e));
		document.getElementById('send-mail').addEventListener('click', e => this.handleMailer(e));
		document
			.getElementById('publish-pages')
			.addEventListener('click', e => this.handlePublished(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));
		}
	}
	//--------------------------
	// 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();
		if (e.target.getAttribute('data-render') == 'false') {
			e.target.setAttribute('data-render', 'true');
			e.target.innerHTML = 'RENDER PAGES ON SAVE';
		} else {
			e.target.setAttribute('data-render', 'false');
			e.target.innerHTML = "DON'T RENDER PAGES ON SAVE";
		}
	}
	handleMailer() {
		mailer.sendMail();
	}
	handleThemes(e) {
		e.stopPropagation();
		e.preventDefault();
		let themes = document.querySelectorAll('.theme-select');
		for (var i = 0, length = themes.length; i < length; i++) {
			e.target.id == themes[i].id
				? themes[i].setAttribute('data-enabled', 'true')
				: themes[i].setAttribute('data-enabled', 'false');
		}
	}
	handleMailOptions(e) {
		e.preventDefault();
		e.stopPropagation();
		let smtp = document.getElementById('mail-smtp');
		let mailgun = document.getElementById('mail-mg');
		let mail = document.querySelectorAll('.mail-option');
		for (var i = 0, length = mail.length; i < length; i++) {
			if (e.target.id == mail[i].id) {
				mail[i].setAttribute('data-enabled', 'true');
				if (e.target.id == 'option-smtp') {
					smtp.setAttribute('data-enabled', 'true');
					mailgun.setAttribute('data-enabled', 'false');
				} else if (e.target.id == 'option-none') {
					smtp.setAttribute('data-enabled', 'false');
					mailgun.setAttribute('data-enabled', 'false');
				} else {
					smtp.setAttribute('data-enabled', 'false');
					mailgun.setAttribute('data-enabled', 'true');
				}
			} else {
				mail[i].setAttribute('data-enabled', 'false');
			}
		}
	}
	handleImageUpload(type, files) {
		api.settingsImageUpload(type, files)
			.then(r => {
				if (r.type == DataEvent.AVATAR_UPLOADED) {
					notify.alert(r.message, true);
					document.getElementById('avatar').src = r.url;
				} else {
					notify.alert(r.message, true);
					document.getElementById('background').src = r.url;
				}
			})
			.catch(() => {
				//console.log(err)
			});
	}
	handlePublished(e) {
		e.preventDefault();
		e.stopPropagation();
		let task = { task: 'publish all pages' };
		api.publishSite(task)
			.then(r => {
				notify.alert(r.message, true);
			})
			.catch(err => {
				notify.alert(err, false);
			});
	}
}