import { Host, h } from "@stencil/core";
import { Link } from '../../functional/Link';
import { cdnAsset, formatCurrency } from '../../utils/utils';
import { converter } from '../../utils/converter';
import slugify from 'slugify';
export class BbListingCard {
    constructor() {
        this.display = 'overlay';
        this.selectedMedia = 0;
    }
    render() {
        if (!this.listingData)
            return (h(Host, null, "Loading"));
        const listing = this.listingData;
        const specs = listing.specifications || {};
        const primaryMedia = listing.media[this.selectedMedia];
        const shortTitle = ([specs.loa && Math.round(converter('length', 'm', 'ft', specs.loa)) + "'", specs.year, specs.manufacturer, specs.manufacturer && specs.model, specs.category, specs.classification]).filter(Boolean).slice(0, 3);
        if (this.display == 'card')
            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: '0.5rem', left: '0.5rem', background: 'rgba(255,50,0,0.8)', color: 'white', fontSize: '0.85rem', fontWeight: '600', padding: '0.5rem', borderRadius: '3px' } }, this.listingData.message)),
                    h("div", { style: { marginTop: '0.5rem', display: 'flex', alignItems: 'flex-end' } },
                        h("div", { style: { width: '50%' } },
                            h("div", { class: "title", style: { fontWeight: '600' } }, shortTitle.join(' · ')),
                            this.listingData.location && h("div", { style: { color: 'inherit', opacity: '0.5', fontWeight: '400' } },
                                h("ion-icon", { name: "pin" }),
                                this.listingData.location)),
                        h("div", { style: { width: '50%', textAlign: 'right' } },
                            h("div", { style: { fontSize: '0.8rem', fontWeight: '500', textTransform: 'uppercase', opacity: '0.5' } }, listing.label),
                            h("div", { style: { fontSize: '1.1rem', fontWeight: '700' } }, listing.price && formatCurrency(listing.price, listing.currency)))))));
        if (this.display == 'overlay')
            return (h(Host, { class: "overlay-card", 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", { class: "message" }, this.listingData.message),
                        h("div", { class: "overlay-header" },
                            h("div", { style: { display: 'flex', margin: '0.5rem', alignItems: 'flex-end' } },
                                h("div", { style: { flex: 'auto' } },
                                    h("div", { class: "title", style: { fontWeight: '600' } }, shortTitle.join(' · ')),
                                    this.listingData.location && h("div", { style: { color: 'inherit', opacity: '0.5', fontWeight: '400' } },
                                        h("ion-icon", { name: "pin" }),
                                        this.listingData.location)),
                                h("div", { style: { flex: 'auto', textAlign: 'right', alignItems: 'flex-end' } },
                                    h("div", { style: { fontSize: '0.8rem', fontWeight: '500', textTransform: 'uppercase', opacity: '0.5' } }, listing.label),
                                    h("div", { style: { fontSize: '1.1rem', fontWeight: '700' } }, listing.price && formatCurrency(listing.price, listing.currency)))))))));
    }
    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
        },
        "display": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'card' | 'list' | 'overlay'",
                "resolved": "\"card\" | \"list\" | \"overlay\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "display",
            "reflect": false,
            "defaultValue": "'overlay'"
        }
    }; }
    static get states() { return {
        "selectedMedia": {}
    }; }
}
