import { h, Host } from "@stencil/core";
import { cdnAsset } from '../../utils/utils';
//let BB_API = 'http://localhost:5000/api'
let BB_API = 'https://www.boaterbase.com/api';
export class BbCollection {
    constructor() {
        this.root = '/';
        this.collectionHeader = 'overlay';
        this.collectionList = 'overlay';
        this.collectionFilters = 'manufacturer,model';
        this.collectionLocationFilter = 'All Locations';
        this.collectionProfileFilter = 'All Profiles';
        this.locationFilter = '';
        this.profileFilter = '';
        this.specsFilter = {};
        this.order = 'index';
    }
    get collectionFiltersList() {
        return this.collectionFilters.split(',');
    }
    get collectionId() {
        // Allow for pretty urls where the id is at the end
        return this.collectionPath.split('-').pop();
    }
    fetchData() {
        return fetch(`${BB_API}/collections/${this.collectionId}`, {
            headers: {
                'Accept': 'application/json',
            },
            method: 'GET'
        }).then();
    }
    async componentWillLoad() {
        //console.log('componentWillLoad')
        this.collectionResponse = await this.fetchData().then(response => response.json());
        console.log(this.collectionResponse);
    }
    async watchPath() {
        //console.log('Path Changed', newValue, oldValue)
        this.collectionResponse = await this.fetchData().then(response => response.json());
    }
    render() {
        var _a, _b, _c, _d;
        if (!this.collectionResponse)
            return h(Host, null,
                h("ion-icon", { name: "help-buoy", class: "spin", style: { width: '2rem', display: 'block', margin: '40vh auto', color: '#cde' } }));
        if (!this.collectionResponse)
            return h(Host, null, "Missing");
        let collection = this.collectionResponse;
        let allListings = collection.listings || [];
        const specFilters = this.collectionFiltersList.map((key) => {
            return {
                key,
                title: 'All ' + key.charAt(0).toUpperCase() + key.slice(1) + 's',
                items: [...new Set(allListings.map(l => l.data.specifications[key]).filter(Boolean))]
            };
        });
        const allLocations = [...new Set(allListings.map(l => l.data.location).filter(Boolean))];
        const allProfiles = allListings.map(l => { var _a, _b, _c, _d, _e, _f, _g, _h; return (((_b = (_a = l.data.profile) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.handle) && { handle: (_d = (_c = l.data.profile) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.handle, name: ((_f = (_e = l.data.profile) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.name) || ((_h = (_g = l.data.profile) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.handle) }); }).filter(Boolean).filter((obj, pos, arr) => {
            return arr.map(mapObj => mapObj.handle).indexOf(obj.handle) === pos;
        });
        // Filters
        let filteredListings = collection.listings;
        for (let specKey in this.specsFilter) {
            if (this.specsFilter[specKey]) {
                filteredListings = filteredListings.filter(l => l.data.specifications[specKey] == this.specsFilter[specKey]);
            }
        }
        if (this.locationFilter) {
            filteredListings = filteredListings.filter(l => l.data.location == this.locationFilter);
        }
        if (this.profileFilter) {
            filteredListings = filteredListings.filter(l => { var _a, _b; return ((_b = (_a = l.data.profile) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.handle) == this.profileFilter; });
        }
        return (h(Host, null,
            this.collectionHeader == 'overlay' && h("div", { class: "header", style: { backgroundColor: (_d = (_c = (_b = (_a = collection) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.info) === null || _c === void 0 ? void 0 : _c.colors[0]) === null || _d === void 0 ? void 0 : _d.color, backgroundImage: collection.header && collection.header.info && collection.header.info.secure_url && `url('${cdnAsset(collection.header.info, 'jpg', 't_large_image')}')` } },
                h("svg", { viewBox: "0 0 2 1", style: { display: 'block', width: '100%', minHeight: '300px' } }),
                h("div", { class: "header-overlay" },
                    h("div", { class: "header-text" },
                        h("h1", null, collection.title),
                        h("p", null, collection.summary)),
                    h("form", { class: "search-form" },
                        specFilters.map((f) => (h("select", { class: "search-form-select", onChange: ({ target }) => this.specsFilter = Object.assign(Object.assign({}, this.specsFilter), { [f.key]: target.value }) },
                            h("option", { selected: this.specsFilter[f.key] == '', value: "" }, f.title),
                            f.items.map((item) => h("option", { selected: this.specsFilter[f.key] == item, value: item }, item))))),
                        h("select", { class: "search-form-select", onChange: ({ target }) => { this.locationFilter = target.value; } },
                            h("option", { selected: this.locationFilter == '', value: "" }, this.collectionLocationFilter),
                            allLocations.map((item) => h("option", { selected: this.locationFilter == item, value: item }, item))),
                        h("select", { class: "search-form-select", onChange: ({ target }) => { this.profileFilter = target.value; } },
                            h("option", { selected: this.profileFilter == '', value: "" }, this.collectionProfileFilter),
                            allProfiles.map((item) => h("option", { selected: this.profileFilter == item.handle, value: item.handle }, item.name)))))),
            filteredListings && h("div", { class: "card-grid" },
                filteredListings.map(listing => {
                    let mergedListing = Object.assign(Object.assign({}, listing.data), { title: listing.title || listing.data.title, message: listing.message || listing.data.message, messageDisplay: listing.messageDisplay });
                    return h("div", { class: "card-grid-item" },
                        h("bb-listing-card", { listingId: listing.id, listingData: mergedListing, root: this.root, display: this.collectionList }));
                }),
                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 {
        "root": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "root",
            "reflect": false,
            "defaultValue": "'/'"
        },
        "collectionPath": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "collection-path",
            "reflect": false
        },
        "collectionHeader": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'none' | 'overlay' | 'image'",
                "resolved": "\"image\" | \"none\" | \"overlay\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "collection-header",
            "reflect": false,
            "defaultValue": "'overlay'"
        },
        "collectionList": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'card' | 'overlay'",
                "resolved": "\"card\" | \"overlay\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "collection-list",
            "reflect": false,
            "defaultValue": "'overlay'"
        },
        "collectionFilters": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "collection-filters",
            "reflect": false,
            "defaultValue": "'manufacturer,model'"
        },
        "collectionLocationFilter": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "collection-location-filter",
            "reflect": false,
            "defaultValue": "'All Locations'"
        },
        "collectionProfileFilter": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "collection-profile-filter",
            "reflect": false,
            "defaultValue": "'All Profiles'"
        }
    }; }
    static get states() { return {
        "collectionResponse": {},
        "locationFilter": {},
        "profileFilter": {},
        "specsFilter": {},
        "order": {}
    }; }
    static get watchers() { return [{
            "propName": "collectionPath",
            "methodName": "watchPath"
        }]; }
}
