'use strict';
import React from 'react';
import io from 'socket.io-client';

export default class NotifPage extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			haveperm: false
		}
	}

	componentDidMount() {
		let socket = io.connect();

		let room = this.props.urlid;

		socket.on('connect', () => {
			socket.emit('room', room);
		});

		socket.on('message', (data) => {
			new Notification(data);
		});
	}

	checkperm(permission) {
		if (permission === 'granted') {
			this.setState({haveperm: true});
		}
	}

	render() {
		let supported = ("Notification" in window);

		if (supported) {
			Notification.requestPermission(permission => {
				this.checkperm(permission);
			}.bind(this));
		}

		return (
			<div className="container">
				<div className="row">
					<div className="twelve columns">
						<h4>Notification Page</h4>
						{ supported || <div className="error"><p>
							Error: This browser does not support desktop notifications :(
						</p></div>}
						{ !this.state.haveperm && supported && <div>
							<p>
								Please give this site permission to display notifications.
							</p>
							<a className="button" href="#" onClick={() => this.checkperm(Notification.permission)}>
								Check Again
							</a>
						</div>}
						{ this.state.haveperm && supported && <p>
							This page is now monitoring for notifications.
						</p>}
					</div>
				</div>
			</div>
		);
	}
}