import Ember from 'ember';

export default Ember.Component.extend({
	modal: undefined,

	show: false,

	setupModal: function() {
		var modal = this.$('.modal').modal({
			show: this.get('show'),
			backdrop: false
		});

		this.$('.modal-backdrop').click(function() {
			modal.modal('hide');
		});

		modal.on('hide.bs.modal', function() {
			var show = this.get('show');

			if (show === false) {
				return true;
			}

			this.sendAction('hide');
			return false;
		}.bind(this));

		modal.on('hidden.bs.modal', function() {
			this.sendAction('hidden');
		}.bind(this));

		this.set('modal', modal);
	}.on('didInsertElement'),

	onVisibilityChanged: function() {
		var dialog = this.get('modal'),
			show = this.get('show');

		if (show === true) {
			dialog.modal('show');
		} else {
			dialog.modal('hide');
		}
	}.observes('show')
});