import { Component, StatefulView } from '@dezrez/core';
import { CounterActions } from '../../actions/counter';
import { IState } from '../../store';
import { NegotiatorActions } from '../../actions/negotiator';
import { negotiatorService } from '../../services/negotiatorService';
import * as ko from 'knockout';

@Component({
	view: require('./about.html')
})
export default class Home extends StatefulView<IState> {
	counter = ko.observable(0);
	negotiator = ko.observable();

	constructor() {
		super();
		// Example of debouncing
		this.store.select(s => s.counter)
			.debounceTime(200)
			.subscribe(value => {
				this.counter(value);
			});

		this.store.select(s => s.advanced).subscribe(advanced => {
			console.log('Advanced changed');
		});
		this.store.select(s => s.advanced.test).subscribe(advanced => {
			console.log('Advanced : Test : changed');
		});
		this.store.select(s => s.advanced.obj).subscribe(advanced => {
			console.log('Advanced : Obj : changed');
		});
		this.store.select(s => s.advanced.obj.prop2).subscribe(advanced => {
			console.log('Advanced : Obj : Prop2 : changed');
		});

		this.store.select(s => s.negotiator.me).subscribe(negotiator => {
			this.negotiator(negotiator);
		});

		this.store.dispatch(NegotiatorActions.get());
	}

	writeToConsole(message: string) {
		console.log(`${message}: ${this.counter()}`);
	}

	increment() {
		this.store.dispatch(CounterActions.increment());
	}

	setTest() {
		// Example call on button click to display request cancelling in action
		this.store.dispatch(NegotiatorActions.get());
		this.store.dispatch({ type: 'SET_TEST', payload: 'NewNameString' });
	}

	setNested() {
		this.store.dispatch({ type: 'SET_NESTED', payload: 5 });
	}
}