import { Host, h } from "@stencil/core";
import { fb } from '../../utils/utils';
export class BbCollection {
    get collectionId() {
        // Allow for pretty urls where the id is at the end
        return this.collectionPath.split('-').pop();
    }
    async componentDidLoad() {
        this.collectionsSnaphot = await fb.firestore().collection('collections').doc(this.collectionId).get();
    }
    async componentDidUpdate() {
        this.collectionsSnaphot = await fb.firestore().collection('collections').doc(this.collectionId).get();
    }
    render() {
        if (!this.collectionsSnaphot)
            return h(Host, null,
                h("ion-icon", { name: "help-buoy", class: "spin", style: { width: '2rem', display: 'block', margin: '40vh auto', color: '#cde' } }));
        if (!this.collectionsSnaphot.exists)
            return h(Host, null, "Missing");
        let collection = this.collectionsSnaphot.data();
        let filteredListings = collection.listings;
        return (h(Host, null,
            h("div", { class: "header", style: { backgroundImage: collection.header && collection.header.info && collection.header.info.secure_url && `url('${collection.header.info.secure_url}')` } },
                h("svg", { viewBox: "0 0 3 1", style: { display: 'block', width: '100%' } }),
                h("div", { class: "header-overlay" },
                    h("h1", { style: { margin: '0.5rem 1rem' } }, collection.title),
                    h("div", { style: { margin: '0.5rem 1rem' } }, collection.summary))),
            filteredListings && h("div", { class: "card-grid" },
                filteredListings.map(listing => h("div", { class: "card-grid-item" },
                    h("bb-listing-card", { listingId: listing.id, listingData: listing.data, history: this.history }))),
                h("div", { class: "card-grid-item" }))));
    }
    static get is() { return "bb-collection"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bb-collection.css"]
    }; }
    static get styleUrls() { return {
        "$": ["bb-collection.css"]
    }; }
    static get properties() { return {
        "collectionPath": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "collection-path",
            "reflect": false
        },
        "history": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "history",
            "reflect": false
        }
    }; }
    static get states() { return {
        "collectionsSnaphot": {}
    }; }
}
