const template = document.createElement('template');

template.innerHTML = `
<style>
	a {
		color: var(--wc-link-color);
		text-decoration-color: var(--wc-link-decoration-color);
		text-decoration-thickness: var(--wc-link-decoration-thickness);
	}
	#comment {
		margin: var(--wc-comment-text-margin);
	}
	#comment p {
		margin: 0 auto 0 auto;
	}
	#meta {
		display: flex;
		flex-flow: row nowrap;
	}
	#meta-text {
		display: flex;
		flex-flow: column nowrap;
		width: 100%;
	}
	#meta-text p {
		margin: 0 1rem 0 1rem;
	}
</style>

<article id="commentContainer" class="blog-comment" part="main">
	<div id="meta" part="meta">
		<div>
			<wc-profile-pic url="" />
		</div>
		<div id="meta-text" part="meta-text">
			<p id="author" part="author">
				<a id="author-link" part="author-link"></a><span> says:</span>
			</p>
			<p id="publish-date" part="publish-date"></p>
		</div>
	</div>
	<div id="comment" part="content">
	</div>
</article>
`

class comment extends HTMLElement {
	constructor() {
		super();

		this._shadowRoot = this.attachShadow({ 'mode': 'open' });
		this._shadowRoot.appendChild(template.content.cloneNode(true));
		this.$comment = this._shadowRoot.querySelector('#commentContainer');
	}

	static get observedAttributes() {
		return ['author_name', 'author_url', 'avatar_url', 'comment_content', 'publish_date'];
	}

	attributeChangedCallback(name, oldVal, newVal) {
		if (oldVal != newVal) {
			this[name] = newVal;
			this.render();
		}
	}

	render() {
		this.$comment.querySelector('#author-link').innerHTML = this.author_name;
		this.$comment.querySelector('#author-link').href = this.author_url;
		this.$comment.querySelector('wc-profile-pic').setAttribute('url', this.avatar_url)
		this.$comment.querySelector('#comment').innerHTML = this.comment_content;
		this.$comment.querySelector('#publish-date').innerHTML = this.publish_date;
	}
}

window.customElements.define('wc-comment', comment);
