import SettingsActions from '../actions/SettingsActions';
import FipamoAPI, {
	REQUEST_TYPE_POST,
	CONTENT_TYPE_FORM,
	CONTENT_TYPE_JSON,
	API_SETTINGS_SYNC,
	API_UPLOAD_AVATAR,
	API_UPLOAD_BACKGROUND,
	API_PUBLISH_PAGES
} 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.request(
						API_SETTINGS_SYNC,
						DataEvent.API_SETTINGS_WRITE,
						REQUEST_TYPE_POST,
						CONTENT_TYPE_JSON,
						data
					).then(response => {
						let r = JSON.parse(response.request['response']);
						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) {
		let url = '';
		let eventType = DataEvent.API_IMAGES_UPLOAD;
		type == 'avatar-upload' ? (url = API_UPLOAD_AVATAR) : (url = API_UPLOAD_BACKGROUND);
		var imageData = new FormData();
		for (var i = 0; i < files.length; i++) {
			var file = files[i];
			// Check the file type.
			if (!file.type.match('image.*')) {
				continue;
			}
			type == 'avatar-upload'
				? imageData.append('avatar_upload', file, file.name)
				: imageData.append('background_upload', file, file.name);
		}
		api.request(url, eventType, REQUEST_TYPE_POST, CONTENT_TYPE_FORM, imageData)
			.then(response => {
				//TODO: Move JSON processing to API class
				let r = JSON.parse(response.request['response']);
				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.request(
			API_PUBLISH_PAGES,
			DataEvent.API_RENDER_PAGES,
			REQUEST_TYPE_POST,
			CONTENT_TYPE_JSON,
			task
		)
			.then(response => {
				let r = JSON.parse(response.request['response']);
				notify.alert(r.message, true);
			})
			.catch(err => {
				notify.alert(err, false);
			});
	}
}