import SettingsActions from '../actions/SettingsActions';
import DataUtils, { REQUEST_TYPE_POST, CONTENT_TYPE_FORM } from '../../../src/com/utils/DataUtils';
import * as DataEvent from '../../../src/com/events/DataEvent';
import Mailer from '../actions/Mailer';
export default class SettingsIndex {
	//--------------------------
	// constructor
	//--------------------------
	constructor() {
		this.start();
		this.dataUtils = new DataUtils();
		this.mailer = new Mailer();
	}
	//--------------------------
	// methods
	//--------------------------
	start() {
		let self = this;
		//handle save button
		document.getElementById('save-toggle').addEventListener('click', () =>
			new SettingsActions()
				.save()
				.then(() => {
					//console.log(response);
				})
				.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('send-mail').addEventListener('click', e => this.handleMailer(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';
		}
	}
	handleMailer() {
		this.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 = '';
		type == 'avatar-upload'
			? (url = '/api/settings/add-avatar')
			: (url = '/api/settings/add-feature-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);
		}
		this.dataUtils
			.request(url, eventType, REQUEST_TYPE_POST, CONTENT_TYPE_FORM, imageData)
			.then(response => {
				let r = JSON.parse(response.request['response']);
				if (r.message == DataEvent.AVATAR_UPLOADED) {
					document.getElementById('avatar').src = r.url;
				} else {
					document.getElementById('background').src = r.url;
				}
			})
			.catch(() => {
				//console.log(err)
			});
	}
}