/**
   * Each Feature of AngularFire has a FirebaseApp injected. This way we
   * don't rely on the main Firebase App instance and we can create named
   * apps and use multiple apps.
   * @param app 
   */
  constructor(public app: FirebaseApp, shouldEnablePersistence) {
    this.firestore = app.firestore();

    this.persistenceEnabled$ = shouldEnablePersistence ? 
      from(app.firestore().enablePersistence().then(() => true)) :
      from(new Promise((res, rej) => { res(false); }));
  }

    // Note when multiple IDs are provided, responses are emitted in order
    // of receipt, not necessarily in the requested ID order.
    getBibSummary(bibIds: number | number[],
        orgId?: number, orgDepth?: number): Observable<BibRecordSummary> {

        const ids = [].concat(bibIds);

        if (ids.length === 0) {
            return from([]);
        }

        return this.pcrud.search('bre', {id: ids},
            {   flesh: 1,
                flesh_fields: {bre: ['flat_display_entries', 'mattrs']},
                select: {bre : this.fetchableBreFields()}
            },
            {anonymous: true} // skip unneccesary auth
        ).pipe(mergeMap(bib => {
            const summary = new BibRecordSummary(bib, orgId, orgDepth);
            summary.net = this.net; // inject
            summary.ingest();
            return this.getHoldingsSummary(bib.id(), orgId, orgDepth)
            .then(holdingsSummary => {
                summary.holdingsSummary = holdingsSummary;
                return summary;
            });
        }));
    }

    function reloadStyleImages(style, styleNames: string[], path, expando): Observable<any> {
        return from(styleNames).pipe(
            filter(styleName => typeof style[styleName] === 'string')
            , map((styleName: string) => {
                let pathName;
                const value = style[styleName];
                const newValue = value.replace(new RegExp(`\\burl\\s*\\(([^)]*)\\)`), (match, src) => {
                    let _src = src;
                    if (src[0] === '"' && src[src.length-1] === '"') {
                        _src = src.slice(1, -1);
                    }
                    pathName = getLocation(_src).pathname;
                    if (pathsMatch(path, pathFromUrl(_src))) {
                        return `url(${generateCacheBustUrl(_src, expando)})`;
                    } else {
                        return match;
                    }
                });

                return [
                    style,
                    styleName,
                    value,
                    newValue,
                    pathName
                ];
            })
            , filter(([style, styleName, value, newValue]) => newValue !== value)
            , map(([style, styleName, value, newValue, pathName]) => styleSet({style, styleName, value, newValue, pathName}))
        )
    }

                    mergeMap(({ selector, styleNames }) => {
                        return from(document.querySelectorAll(`[style*=${selector}]`)).pipe(
                            mergeMap((img: HTMLImageElement) => {
                                return reloadStyleImages(img.style, styleNames, path, expando);
                            })
                        )

                    })

    function reloadStylesheet(path: string, document: Document, navigator): Observable<any> {
        // has to be a real array, because DOMNodeList will be modified
        const links: HTMLLinkElement[] = array(document.getElementsByTagName('link'))
            .filter(link => {
                return link.rel.match(/^stylesheet$/i)
                    && !link.__LiveReload_pendingRemoval;
            });

        /**
         * Find imported style sheets in <style> tags
         * @type {any[]}
         */
        const styleImported = array(document.getElementsByTagName('style'))
            .filter(style => Boolean(style.sheet))
            .reduce((acc, style) => {
                return acc.concat(collectImportedStylesheets(style, style.sheet));
            }, []);

        /**
         * Find imported style sheets in <link> tags
         * @type {any[]}
         */
        const linksImported = links
            .reduce((acc, link) => {
                return acc.concat(collectImportedStylesheets(link, link.sheet));
            }, []);

        /**
         * Combine all links + sheets
         */
        const allRules = links.concat(styleImported, linksImported);

        /**
         * Which href best matches the incoming href?
         */
        const match = pickBestMatch(path, allRules, l => pathFromUrl(linkHref(l)));

        if (match) {
            if (match.object && match.object.rule) {
                return reattachImportedRule(match.object, document);
            }
            return reattachStylesheetLink(match.object, document, navigator);
        } else {
            if (links.length) {
                // no <link> elements matched, so was the path including '*'?
                const [first, ...rest] = path.split('.');
                if (first === '*') {
                    return from(links.map(link => reattachStylesheetLink(link, document, navigator)))
                        .pipe(mergeAll())
                }
            }
        }

        return empty();
    }

    function reloadImages(path, document): Observable<any> {

        const expando = generateUniqueString(Date.now());

        return merge(
            from([].slice.call(document.images))
                .pipe(
                    filter((img: HTMLImageElement) => pathsMatch(path, pathFromUrl(img.src)))
                    , map((img: HTMLImageElement) => {
                        const payload = {
                            target: img,
                            prop: 'src',
                            value: generateCacheBustUrl(img.src, expando),
                            pathname: getLocation(img.src).pathname
                        };
                        return propSet(payload);
                    })
                ),
            from(IMAGE_STYLES)
                .pipe(
                    mergeMap(({ selector, styleNames }) => {
                        return from(document.querySelectorAll(`[style*=${selector}]`)).pipe(
                            mergeMap((img: HTMLImageElement) => {
                                return reloadStyleImages(img.style, styleNames, path, expando);
                            })
                        )

                    })
                )
        );

        // if (document.styleSheets) {
        //     return [].slice.call(document.styleSheets)
        //         .map((styleSheet) => {
        //             return reloadStylesheetImages(styleSheet, path, expando);
        //         });
        // }
    }

  private processRoutes(ngModule: NgModuleRef<any>, routes: Routes): Observable<void> {
    const res: Observable<any>[] = [];
    for (const route of routes) {
      // we already have the config loaded, just recurse
      if (route.loadChildren && !route.canLoad && route._loadedConfig) {
        const childConfig = route._loadedConfig;
        res.push(this.processRoutes(childConfig.module, childConfig.routes));

        // no config loaded, fetch the config
      } else if (route.loadChildren && !route.canLoad) {
        res.push(this.preloadConfig(ngModule, route));

        // recurse into children
      } else if (route.children) {
        res.push(this.processRoutes(ngModule, route.children));
      }
    }
    return mergeAll.call(from(res));
  }

 downloadURL: () => from(task.then(s => s.downloadURL)),

 const fakeStore = { select: () => from([{} as AppState])} as any as Store<AppState>;

 updateMetatdata: (meta: SettableMetadata) => from(ref.updateMetadata(meta)),