import {LitElement, html, unsafeHTML} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';
import * as tfutils from './tf-utils.js';
import {styles} from './tf-styles.js';

class TfProfileElement extends LitElement {
	static get properties() {
		return {
			id: {type: String},
			users: {type: Object},
		}
	}

	static styles = styles;

	constructor() {
		super();
		let self = this;
		this.id = null;
		this.users = {};
	}

	render_raw() {
		return html`<div style="white-space: pre-wrap">${JSON.stringify(this.message, null, 2)}</div>`
	}

	render() {
		let profile = this.users[this.id] || {};
		return html`<div style="border: 2px solid black; background-color: rgba(255, 255, 255, 0.2); padding: 16px">
			<tf-user id=${this.id} .users=${this.users}></tf-user>
			<div><img src=${'/' + profile.image + '/view'} style="width: 256px; height: auto"></img></div>
			<div>${unsafeHTML(tfutils.markdown(profile.description))}</div>
		</div>`;
	}
}

customElements.define('tf-profile', TfProfileElement);