const Router = window.ReactRouterDOM.HashRouter;
const Route = window.ReactRouterDOM.Route;
const NavLink = window.ReactRouterDOM.NavLink;

function ShowLoading() {
    return <div className="loading">Loading...</div>;
}

function ShowError(props) {
    return <div className="error">{props.error}</div>;
}

function HomePage() {
    let library = 'None';
    if (window.marked) {
        library = 'marked';
    } else if (window.markdownit) {
        library = 'markdown-it';
    } else if (window.remarkable) {
        library = 'Remarkable';
    }
    return (
        <>
            <h1>DataFormsJS React &lt;Markdown&gt; Component<br /> with [{library}] Markdown Library</h1>

            {/*
                To display markdown from a web service or site only [url] needs to be included:
                    <Markdown url="..." />

                The example below shows additional options to show a loading screen while
                content is being fetched, define a root class, and to update links after
                the markdown has been rendered.

                These attributes make it easy to show content that links to other sites correctly
                and for the current page not to be changed when the user clicks a link.
            */}
            <Markdown
                url="https://raw.githubusercontent.com/dataformsjs/dataformsjs/master/README.md"
                className="markdown-content"
                loadOnlyOnce
                isLoading={<ShowLoading />}
                linkTarget="_blank"
                linkRel="noopener"
                linkRootUrl="https://github.com/dataformsjs/dataformsjs/blob/master/"
            />
        </>
    )
}

{/*
    To see the image error add the prop:
        useRootUrl={false}
    To <Markdown>
*/}
function LocalPage() {
    return (
        <>
            <section className="description">
                <p>By default unless [useRootUrl=false] is used content that points to relative URL's will automatically be handled based on the path of the Markdown Document.</p>
                <p><a href="https://github.com/mark-anders/relative-image-url" target="_blank" rel="noopener">https://github.com/mark-anders/relative-image-url</a></p>
            </section>
            <Markdown
                url="https://raw.githubusercontent.com/mark-anders/relative-image-url/master/README.md"
                className="markdown-content"
                loadOnlyOnce
                isLoading={<ShowLoading />} />
        </>
    )
}

function DataPage() {
    return (
        <JsonData
            url="https://www.dataformsjs.com/data/random/markdown"
            isLoading={<ShowLoading />}
            hasError={<ShowError />}
            isLoaded={<ShowMarkdown />} />
    )
}

function ShowMarkdown(props) {
    return (
        <>
            <Markdown content={props.data.content} className="markdown-content" />
            {props.data.list.map(item => {
                return <Markdown content={item.content} className="markdown-content" />
            })}
        </>
    )
}

function ErrorPage() {
    return <Markdown url="/404" className="markdown-content" />
}

function App() {
    return (
        <ErrorBoundary>
            <Router>
                <header>
                    <nav>
                        <NavLink exact to="/">Home</NavLink>
                        <NavLink exact to="/local">Local Content</NavLink>
                        <NavLink to="/data">Markdown using Content</NavLink>
                        <NavLink to="/404-content">Markdown Fetch Error</NavLink>
                    </nav>
                </header>
                <main id="view">
                    <Route exact path="/" component={HomePage} />
                    <Route exact path="/local" component={LocalPage} />
                    <Route exact path="/data" component={DataPage} />
                    <Route exact path="/404-content" component={ErrorPage} />
                </main>
            </Router>
        </ErrorBoundary>
    )
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);