appElement.innerHTML = '<h2>You appear to be using Internet Explorer<br/>It would be a good time to examine the life choices that have led you to this moment</h2>'
  appElement.style.cssText = 'height: 100%; text-align: center; padding-top: 50vh; background-color: black;'
  appElement.id = 'nope'
}

normalize()
setupPage('#app')

const popArtShadow = {textShadow: '5px 5px 0 #000, 2px 0 0 black,  0 2px 0 black, 0 -2px 0 black, -2px 0 0 black', color: '#fff'}

cssRule('body', {fontFamily: '"PT Sans", sans-serif', background: `#bb270f url(${bgImage})`, backgroundSize: 'cover', color: '#fff', fontSize: '20px'})
cssRule('h1', {fontFamily: 'Bangers, sans-serif', transform: 'rotate(-4deg)', letterSpacing: '5px', margin: '150px 0 20px 0', textAlign: 'center', fontSize: '4em'}, popArtShadow)
cssRule('h2', {fontFamily: 'Bangers, sans-serif', transform: 'rotate(0deg)', letterSpacing: '2px', margin: '30px 0 20px 0', textAlign: 'center', fontSize: '2em'}, popArtShadow)
cssRule('a', {color: '#fff'})

const main : Component = onionify(App)

const drivers : any = {
    DOM: makeDOMDriver('#app'),
    HTTP: makeHTTPDriver()
}
export const driverNames : string[] = Object.keys(drivers)

// Cycle apps (main functions) are allowed to return any number of sinks streams
// This sets defaults for all drivers that are not used by the app
const defaultSinks : (s : Sources) => RootSinks = sources => ({
    ...driverNames.map(n => ({ [n]: xs.never() })).reduce(Object.assign, {}),
    ...main(sources)
})

run(defaultSinks, drivers)

export function wrapMain(main: Component): Component {
    return routerify(
        onionify(
            storageify(auth0ify(main, AUTH0IFY_OPTIONS) as any, {
                key: 'brian-state',
                debounce: 100 // wait for 100ms without state change before writing to localStorage
            })
        ),
        switchPath as RouteMatcher
    ) as any
}

                withTime(Time => {
                    const add$ = Time.diagram(addDiagram)
                    const subtract$ = Time.diagram(subtractDiagram)

                    const DOM = mockDOMSource({
                        '.add': { click: add$ },
                        '.subtract': { click: subtract$ }
                    })

                    const app = onionify(App)({ DOM } as any)
                    const html$ = (app.DOM as Stream<VNode>).map(toHtml)

                    const expected$ = xs
                        .merge(add$.mapTo(+1), subtract$.mapTo(-1))
                        .fold((acc, curr) => acc + curr, 0)
                        .map(expectedHTML)

                    Time.assertEqual(html$, expected$, htmlLooksLike)
                })

        const property = forall(diagramArbitrary, diagramArbitrary, (addDiagram, subtractDiagram) => {
            const Time = mockTimeSource();

            const add$ = Time.diagram(addDiagram);
            const subtract$ = Time.diagram(subtractDiagram);

            const DOM = mockDOMSource({
                '.add': { click: add$ },
                '.subtract': { click: subtract$ }
            });

            const app = onionify(App)({ DOM } as any);
            const html$ = app.DOM.map(toHtml);

            const expected$ = xs.merge(add$.mapTo(+1), subtract$.mapTo(-1))
                .fold((acc, curr) => acc + curr, 0)
                .map(expectedHTML);

            Time.assertEqual(html$, expected$, htmlLooksLike);
            return promise(Time.run);
        });

function ProjectWithDB(sources: ISources) {
  const projectResult$ = sources.DB.store("projects").get(sources.id);

  const initialState$ = projectResult$.filter(Boolean) as Stream<Project>;

  const project = onionify(Project)({ ...sources, initialState$ });

  const initialPersistence$ = projectResult$
    .filter((project: Project | undefined) => project === undefined)
    .mapTo($add("projects", makeProject(sources.id as string)));

  const updatePersistence$ = (project as any).state$.map((state: Project) =>
    $update("projects", state)
  );

  return {
    ...project,

    DB: xs.merge(initialPersistence$, updatePersistence$)
  };
}