import { Component, Host, Prop, State, Event, h } from '@stencil/core';
import { cdnAsset, formatCurrency, cleanText } from '../../utils/utils';
import { converter } from '../../utils/converter';
import slugify from 'slugify';
export class BbListingCard {
    constructor() {
        this.root = '/';
        this.display = 'overlay';
        this.selectedMedia = 0;
        // TODO - see collection handler with (path) for other links
        this.linkClickHandler = (ev) => {
            let event = this.linkClick.emit({
                path: `listings/${slugify(this.listingData.title)}-${this.listingId}`
            });
            if (event.defaultPrevented) {
                ev.preventDefault();
            }
        };
    }
    render() {
        var _a, _b, _c, _d, _e, _f, _g;
        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, 4);
        const shortLocation = listing.location ? listing.location.split(',').slice(-2).join(',') : listing.location;
        if (this.display == 'card')
            return (h(Host, { style: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' } },
                h("a", { onClick: this.linkClickHandler, class: "card link scale-hover", style: { flex: 'auto', display: 'block', textDecoration: 'none' }, href: `${this.root}listings/${slugify(this.listingData.title)}-${this.listingId}` },
                    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') }),
                        ((_c = (_b = (_a = listing.profile) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.avatar) === null || _c === void 0 ? void 0 : _c.info) && h("img", { src: listing.profile.data.avatar.info.thumbnail_url, style: { position: 'absolute', top: '0.5rem', right: '0.5rem', width: '3rem', height: '3rem', border: '1px solid white', borderRadius: '100%' } })),
                    h("div", { style: { display: 'flex', background: '#f1f1f1', padding: '1rem 0.75rem 0.5rem 0.75rem' } },
                        h("h2", { style: { flex: 'auto', color: '#445566', margin: '0', fontWeight: '400', fontSize: '1.65rem' } }, this.listingData.title),
                        this.listingData.messageDisplay == 'highlight' && this.listingData.message && h("div", { style: { background: 'rgba(255,50,0,0.8)', color: 'white', fontSize: '0.75rem', borderRadius: '0.25rem', fontWeight: '500', padding: '0.5rem', textTransform: 'uppercase' } }, cleanText(this.listingData.message)),
                        this.listingData.messageDisplay == 'visible' && this.listingData.message && h("div", { style: { background: 'rgba(50,50,50,0.8)', color: 'white', fontSize: '0.75rem', borderRadius: '0.25rem', fontWeight: '500', padding: '0.5rem', textTransform: 'uppercase' } }, cleanText(this.listingData.message))),
                    h("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', background: '#f1f1f1', padding: '0.75rem' } },
                        h("div", { style: { flex: 'auto' } },
                            h("div", { class: "title", style: { fontWeight: '600', fontSize: '0.9rem', display: 'flex', alignItems: 'center' } },
                                h("bb-icon", { icon: "entypo:info-with-circle", style: { marginRight: '3px', opacity: '0.5' } }),
                                shortTitle.join(' · ')),
                            (listing.location || ((_e = (_d = listing.profile) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.name)) && h("div", { style: { display: 'flex', alignItems: 'center', color: 'inherit', opacity: '0.5', fontWeight: '400', fontSize: '0.9rem' } },
                                h("bb-icon", { icon: "gridicons:location", style: { marginRight: '3px', opacity: '0.5' } }),
                                [(_g = (_f = listing.profile) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.name, shortLocation].filter(Boolean).join(', '))),
                        h("div", { style: { flex: 'auto', textAlign: 'right' } },
                            listing.label && h("div", { style: { fontSize: '0.8rem', fontWeight: '500', textTransform: 'uppercase', opacity: '0.5' } }, cleanText(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("a", { onClick: this.linkClickHandler, class: "link", style: { flex: 'auto', display: 'block', textDecoration: 'none' }, href: `${this.root}listings/${slugify(this.listingData.title)}-${this.listingId}` },
                    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" }, cleanText(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("bb-icon", { icon: "gridicons:location", color: "white" }),
                                        shortLocation)),
                                h("div", { style: { flex: 'auto', textAlign: 'right', alignItems: 'flex-end' } },
                                    listing.label && 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 {
        "root": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "root",
            "reflect": false,
            "defaultValue": "'/'"
        },
        "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": {}
    }; }
    static get events() { return [{
            "method": "linkClick",
            "name": "linkClick",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
}
