import {LitElement, html, map, unsafeHTML} from './lit-all.min.js';
import {markdown} from './markdown.js';

class BookTileElement extends LitElement {
	static get properties() {
		return {
			book: {type: Object},
		};
	}

	render() {
		return html`
			<link rel="stylesheet" href="w3.css"></link>
			<div class="w3-card-4">
				<header class="w3-container">
					<h1>${markdown(this.book.title)}</h1>
				</header>
				<div class="w3-container">
					${
						this.book.image
							? html`
									<img
										src="/${this.book.image?.link}/view"
										class="w3-left w3-margin-right w3-margin-bottom"
										style="max-height: 2in; max-width: 2in"
									/>
								`
							: undefined
					}
					<h2>${map(this.book.authors, (author) => markdown(author))}</h2>
					<p>${markdown(this.book.description)}</p>
					<span>${this.book.reviews.length} readers</span>
					<span>${this.book.reviews.filter((x) => x.content?.rating !== undefined).length} reviews</span>
				</div>
				<footer>
					<h3><a target="_top" class="w3-block w3-gray w3-button" href=${'#' + encodeURIComponent(this.book.id)}>Read More</a></h3>
				</footer>
			</div>`;
	}
}

customElements.define('bc-book-tile', BookTileElement);
