import { Host, h } from "@stencil/core";
import { fb } from '../../utils/utils';
export class BbProfile {
    constructor() {
        this.filter = {
            collection: '',
            model: '',
            manufacturer: ''
        };
    }
    async componentDidLoad() {
        // Handles is a list so we must do a query and grab the first item
        const profilesSnaphot = await fb.firestore().collection('profiles').where('handles', 'array-contains', this.profilePath).get();
        this.profileSnaphot = profilesSnaphot.docs && profilesSnaphot.docs[0];
        if (this.profileSnaphot) {
            // TODO - use attached collections NOT a query
            this.collectionsSnaphot = await fb.firestore().collection('collections').where('uid', '==', this.profileSnaphot.get('uid')).get();
        }
    }
    render() {
        if (!this.profileSnaphot)
            return h(Host, null, "Loading...");
        else if (!this.profileSnaphot.exists)
            return h(Host, null, "Missing!");
        else {
            const profile = this.profileSnaphot.data();
            const collections = this.collectionsSnaphot && this.collectionsSnaphot.docs.map(doc => ({
                id: doc.id,
                ref: doc.ref,
                data: doc.data()
            }));
            //const featuredCollection = collections && collections[0];
            let allListings = collections && collections.reduce((prev, collection) => prev.concat(collection.data.listings), []);
            // Only unique
            allListings = allListings && allListings.filter((obj, index, arr) => arr.findIndex(f => (f.id === obj.id)) === index);
            const models = allListings && [...new Set(allListings.map(l => l.data.specifications.model).filter(Boolean))];
            const manufacturers = allListings && [...new Set(allListings.map(l => l.data.specifications.manufacturer).filter(Boolean))];
            let filteredListings = allListings;
            if (this.filter.collection) {
                filteredListings = collections.filter(({ id }) => id == this.filter.collection)[0].data.listings;
            }
            if (this.filter.model) {
                filteredListings = filteredListings.filter(l => l.data.specifications.model == this.filter.model);
            }
            if (this.filter.manufacturer) {
                filteredListings = filteredListings.filter(l => l.data.specifications.manufacturer == this.filter.manufacturer);
            }
            return h(Host, null,
                h("div", { class: "header" },
                    h("h1", { style: { margin: '0' } }, profile.name),
                    h("div", { style: { margin: '1rem 0' } }, profile.summary),
                    h("form", { class: "search-form" },
                        h("select", { class: "search-select", onChange: ({ target }) => this.filter = Object.assign(Object.assign({}, this.filter), { collection: target.value }) },
                            h("option", { selected: this.filter.collection == '', value: "" }, "All Collections"),
                            collections && collections.map(collection => h("option", { selected: this.filter.collection == collection.id, value: collection.id }, collection.data.title))),
                        h("select", { class: "search-select", onChange: ({ target }) => this.filter = Object.assign(Object.assign({}, this.filter), { model: target.value }) },
                            h("option", { selected: this.filter.model == '', value: "" }, "All Models"),
                            models && models.map(model => h("option", { selected: this.filter.model == model, value: model }, model))),
                        h("select", { class: "search-select", onChange: ({ target }) => this.filter = Object.assign(Object.assign({}, this.filter), { manufacturer: target.value }) },
                            h("option", { selected: this.filter.manufacturer == '', value: "" }, "All Manufacturers"),
                            manufacturers && manufacturers.map(manufacturer => h("option", { selected: this.filter.manufacturer == manufacturer, value: manufacturer }, manufacturer))))),
                filteredListings && h("div", { class: "card-list" }, filteredListings.map(listing => h("div", { class: "card-list-item" },
                    h("bb-listing-card", { listingId: listing.id, listingData: listing.data, history: this.history })))));
        }
    }
    static get is() { return "bb-profile"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bb-profile.css"]
    }; }
    static get styleUrls() { return {
        "$": ["bb-profile.css"]
    }; }
    static get properties() { return {
        "profilePath": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "profile-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 {
        "profileSnaphot": {},
        "collectionsSnaphot": {},
        "filter": {}
    }; }
}
