import { r as registerInstance, h, H as Host } from './core-a2437226.js';

//const apiPath = `https://firestore.googleapis.com/v1/projects/boaterbase-v2/databases/(default)/`
const imagePath = `https://res.cloudinary.com/boaterbase/image/upload/`;
const BbCollection = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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 style() { return ":host{all:initial;display:block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}:focus{outline:none;-webkit-box-shadow:0 0 0 2px #4682b4;box-shadow:0 0 0 2px #4682b4}form{display:block;margin:1rem}input[type=search]{display:block;width:100%;border-radius:2rem;font-size:1rem;padding:.5rem 1rem;margin:0;border:none;background-color:#eee}h1{margin:1rem}ul{margin:1rem;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:50rem}li,ul{list-style-type:none;padding:0}li{margin:0;min-width:300px;width:calc(100%/3)}li img{display:block;width:100%;height:180px;-o-object-fit:cover;object-fit:cover;border-radius:.25rem;-webkit-box-shadow:0 0 1rem rgba(0,10,20,.25);box-shadow:0 0 1rem rgba(0,10,20,.25)}li h3{font-size:1rem}"; }
};

export { BbCollection as bb_collection };
