import { Model, Component } from 'rasti';

import { Model, Component } from 'https://esm.run/rasti';

const { Model, Component } = Rasti;

// Define a Timer component that displays the number of seconds from the model.
const Timer = Component.create`
    <div>
        Seconds: <span>${({ model }) => model.seconds}</span>
    </div>
`;

// Create a model to store the seconds.
const model = new Model({ seconds: 0 });

// Mount the Timer component to the body and pass the model as an option.
Timer.mount({ model }, document.body);

// Increment the `seconds` property of the model every second.
setInterval(() => model.seconds++, 1000);

// Define the routes for the navigation menu.
const routes = [
    { label: 'Home', href: '#' },
    { label: 'Faq', href: '#faq' },
    { label: 'Contact', href: '#contact' },
];

// Create a Link component for navigation items.
const Link = Component.create`
    <a href="${({ options }) => options.href}">
        ${({ options }) => options.renderChildren()}
    </a>
`;

// Create a Navigation component that renders Link components for each route.
const Navigation = Component.create`
    <nav>
        ${({ options, partial }) => options.routes.map(
            ({ label, href }) => partial`<${Link} href="${href}">${label}</${Link}>`
        )}
    </nav>
`;

// Create a Main component that includes the Navigation and displays the current route's label as the title.
const Main = Component.create`
    <main>
        <${Navigation} routes=${({ options }) => options.routes} />
        <section>
            <h1>
                ${({ model, options }) => options.routes.find(
                    ({ href }) => href === (model.location || '#')
                ).label}
            </h1>
        </section>
    </main>
`;

// Initialize a model to store the current location.
const model = new Model({ location: document.location.hash });

// Update the model's location state when the browser's history changes.
window.addEventListener('popstate', () => model.location = document.location.hash);

// Mount the Main component to the body, passing the routes and model as options.
Main.mount({ routes, model }, document.body);