import core from 'metaljs/src/core';
import dom from 'metaljs/src/dom/dom';
import SoyComponent from 'metaljs/src/soy/SoyComponent';
import ComponentRegistry from 'metaljs/src/component/ComponentRegistry';
import './MyComponent.soy.js';

class MyComponent extends SoyComponent {
	constructor(opt_config) {
		super(opt_config);
	}

	updateBD(event) {
		this.bodyContent = event.target.value;
	}

	setBodyContent() {
		this.bodyContent = 'test';
	}

	syncVisible(visible) {
		this.element.style.display = visible ? null : 'none';
	}
}

MyComponent.ATTRS = {
	bodyContent: {
		validator: core.isString,
		value: ''
	},

	foo: {
		validator: core.isString,
		value: 'FOO'
	},

	headerContent: {
		validator: core.isString,
		value: ''
	},

	footerContent: {
		validator: core.isString,
		value: ''
	},

	visible: {
		validator: core.isBoolean,
		value: true
	}
};

MyComponent.ELEMENT_CLASSES = 'mycomponent';

ComponentRegistry.register('MyComponent', MyComponent);

export default MyComponent;