import { Host, h } from "@stencil/core";
import { Link } from '../../functional/Link';
import { cdnAsset } from '../../utils/utils';
import slugify from 'slugify';
export class BbListingCard {
    constructor() {
        this.selectedMedia = 0;
    }
    render() {
        if (!this.listingData)
            return (h(Host, null, "Loading"));
        const primaryMedia = this.listingData.media[this.selectedMedia];
        return (h(Host, { style: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' } },
            h(Link, { class: "link", style: { flex: 'auto', display: 'block', textDecoration: 'none' }, href: `/listings/${slugify(this.listingData.title)}-${this.listingId}`, history: this.history },
                h("div", { class: "preview-image", style: { position: 'relative' } },
                    h("svg", { viewBox: "0 0 6 4", style: { display: 'block', width: '100%' } }),
                    primaryMedia && h("img", { style: { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', objectFit: 'cover' }, src: cdnAsset(primaryMedia.info, 'jpg', 't_large_image') }),
                    this.listingData.message && h("div", { style: { position: 'absolute', top: '1rem', left: '0', background: 'rgba(255,50,0,0.8)', color: 'white', fontSize: '0.85rem', fontWeight: '600', padding: '0.25rem 0.5rem', borderRadius: '0 3px 3px 0' } }, this.listingData.message)),
                h("div", { style: { marginTop: '0.5rem' } },
                    h("div", { class: "title", style: { fontWeight: '600' } }, this.listingData.title),
                    h("div", { style: { color: 'inherit', opacity: '0.5', fontWeight: '400' } }, this.listingData.location)))));
    }
    static get is() { return "bb-listing-card"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bb-listing-card.css"]
    }; }
    static get styleUrls() { return {
        "$": ["bb-listing-card.css"]
    }; }
    static get properties() { return {
        "history": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "history",
            "reflect": false
        },
        "listingId": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "listing-id",
            "reflect": false
        },
        "listingData": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "listing-data",
            "reflect": false
        }
    }; }
    static get states() { return {
        "selectedMedia": {}
    }; }
}
