import * as ko from 'knockout';
import {ViewModel, Component} from '@dezrez/core';

import {store} from '../../store';

import {Nested, INestedProps} from '../nested/nested';

@Component({
	view: require('./alert.html')
})
export class Alert extends ViewModel {
	variant = ko.observable('');
	text = ko.observable('');
	title = ko.observable('');
	canClose = ko.observable(true);
	nestedDescription = ko.observable(0);

	nested = this.bindChildWithProps<INestedProps>(Nested, {
		description: this.nestedDescription,
		update: this.updateDescription
	});

	className = ko.pureComputed(function() {
		const classes = [
			'alert-' + this.variant()
		];

		if (this.canClose()) {
			classes.push('alert-dismissable');
		}

		return classes.join(' ');
	},
	this);

	constructor() {
		super();

		store.select(s => s.counter).subscribe(val => this.nestedDescription(val));
	}

	activate(settings) {
		this.variant(settings.variant || 'danger');
		this.text(settings.text);
		this.title(settings.title);
		this.canClose(settings.canClose !== false);
	}

	updateDescription() {
		store.dispatch({type: 'INCREMENT'});
	}
}