import { customElement, html, render } from '@chialab/dna';
import { App } from '@chialab/synapse';

@customElement('demo-app')
class DemoApp extends App {
    routes = [
        {
            pattern: '/',
            render(req, res) {
                return (
                    <main>
                        <h1>Home</h1>
                    </main>
                );
            },
        },
        {
            handler(req, res) {
                res.data = new Error('not found');
            },
            render(req, res) {
                return (
                    <main>
                        <details>
                            <summary>${res.data.message}</summary>
                            <pre>${res.data.stack}</pre>
                        </details>
                    </main>
                );
            },
        },
    ];

    render() {
        return (
            <>
                <header>
                    <h1>Synapse 3.0</h1>
                </header>
                <nav>
                    <ul>
                        <li>
                            <a href={router.resolve('/')}>Home</a>
                        </li>
                    </ul>
                </nav>
                {super.render()}
            </>
        );
    }
}

const app = render(<DemoApp base="/" />, document.getElementById('app'));

app.start('/');