import { Host, h } from "@stencil/core";
//const apiPath = `https://firestore.googleapis.com/v1/projects/boaterbase-v2/databases/(default)/`
const imagePath = `https://res.cloudinary.com/boaterbase/image/upload/`;
export class BbCollection {
    constructor() {
        this.loaded = false;
        this.search = '';
        this.searchHandler = (ev) => {
            var el = ev.target;
            this.search = el.value;
        };
    }
    async componentWillLoad() {
        //this.collection = await fetch(apiPath + 'documents/listings').then((r) => r.json()).then(json => FireStoreParser(json));
        this.loaded = true;
    }
    render() {
        if (this.loaded && this.collection && this.collection.documents) {
            let boats = this.collection.documents.filter(({ fields }) => fields.title.toLowerCase().indexOf(this.search) != -1);
            boats = [...boats, ...boats, ...boats];
            return (h(Host, null,
                h("h1", null, "Featured Boats"),
                h("form", null,
                    h("input", { type: "search", placeholder: "Search", value: this.search, onInput: this.searchHandler })),
                h("ul", null, boats.map(({ name, fields }) => (h("li", { key: name },
                    h("div", { style: { padding: '0.5rem' } },
                        fields.media && h("img", { onClick: () => { this.loaded = false; }, onLoad: (ev) => ev.target.style.opacity = 1.0, style: { transition: 'opacity 0.5s', opacity: '0', backgroundColor: fields.media[0].info.colors ? fields.media[0].info.colors[0].color : 'black', display: 'block', width: '100%' }, sizes: "100vw", src: `${imagePath}c_scale,w_auto,dpr_auto,q_auto,fl_lossy,f_auto/c_limit,w_800/${fields.media[0].info.public_id}` }),
                        h("h3", null, fields.title))))))));
        }
        else
            return (h(Host, null));
    }
    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 states() { return {
        "collection": {},
        "loaded": {},
        "search": {}
    }; }
}
