import * as V from 'superfine';
import View from '../view';


const DELAY_OF_NOTIFY = 15000,
	MAX_MESSAGE_SHOW = 5;

class NotifyView extends View {
	constructor () {
		super();
		this.el.classList.add('notifications');
		if ('Notification' in window) {
			window.Notification.requestPermission();
		}

		this.messages = [];
		window.setInterval(this.removeLast.bind(this), DELAY_OF_NOTIFY);
	}

	removeLast () {
		this.messages.splice(0, 1);
		this.render();
	}

	renderMSG (msg) {
		const {messages} = this,
			content = [msg.content];

		let {render} = this;
		render = render.bind(this);

		if (msg.header) {
			content.unshift(V.h('div', {'class': 'header'}, msg.header));
		}


		return V.h(
			'div', {
				'class': `notify ${msg.type}`,
				'onclick': () => {
					const index = messages.indexOf(msg);
					if (index !== -1) {
						messages.splice(index, 1);
						render();
					}
				}
			}, V.h('div', {'class': 'content'}, content));
	}

	send (props, content) {
		let msg = props;
		if (typeof props === 'object') {
			msg.content = content;
		} else {
			msg = {
				'content': content,
				'type': props
			};
		}
		if ('Notification' in window &&
			window.Notification.permission === 'granted') {
			let body = msg.type,
				title = content;
			if (msg.header) {
				title = msg.header;
				body = msg.content;
			}

			// eslint-disable-next-line no-new
			new window.Notification(title, {
				'body': body,
				'icon': '/favicon-32x32.png'
			});

			return;
		}
		if (this.messages.length > MAX_MESSAGE_SHOW) {
			this.removeLast();
		}

		this.messages.push(msg);
		this.render();
	}

	render () {
		V.render(this.vel, this.vel = V.h('div', {'class': 'notifications'}, this.messages.map(this.renderMSG.bind(this))), this.el);
	}
}
// eslint-disable-next-line one-var
const singelton = new NotifyView();
export {singelton, NotifyView};