import XNode from "@web-atoms/core/dist/core/XNode";
import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
import StackBlitzView from "../../controls/StackBlitzView";

export default class HomePage extends ContentPage {

    public async init() {
        this.title = "Web Atoms - Lightweight JavaScript Framework"

        const initialPath = encodeURIComponent("/index.html?mode=mobile");
        const sampleUrl = `https://stackblitz.com/edit/web-atoms-binding-demo?embed=1&file=src/pages/home/Home.tsx&hideExplorer=1&initialPath=${initialPath}`;

        this.renderer = <div data-layout="vertical-flex-stretch-items">
            <h3>Lightweight JavaScript framework with MVU Pattern with Data Binding in JSX</h3>
            <p>
                Web Atoms was built around 2012, for years we have made numerous improvements.
                Pages and components are written with help of JSX syntax, however, Web Atoms is
                independent framework with no dependency on react or preact.
                Current release supports,</p>
            <ul>
                <li>Data Binding, simple arrow functions to bind the UI elements</li>
                <li>Styled Support</li>
                <li>AtomRepeater - Lightweight List Control to manage list of items</li>
                <li>Chips control</li>
                <li>Dual View support (Mobile and Desktop)</li>
                <li>Smallest syntax</li>
                <li>Faster rendering</li>
                <li>Simple Data Validations</li>
                <li>RetroFit inspired REST API Support</li>
                <li>No additional build configurations</li>
                <li>Event re routing, it helps in reducing number of event listeners on page.</li>
                <li>UMD and SystemJS Module Loader</li>
                <li>Packer, to pack all JavaScript in single module along with dynamic module loader support</li>
            </ul>

            <h4>Syntax</h4>
            <p>Web Atoms supports JSX Class Components and Functional Components.</p>

            <h4>Binding Demo</h4>
            <p>
                This app demonstrates almost all features of Web Atoms
                <a
                    style-margin="0px 5px 0px 5px"
                    target="_blank" href="https://github.com/web-atoms-samples/binding">https://github.com/web-atoms-samples/binding</a>
                We recommed opening this example in stackblitz to instantly see preview.
            </p>

            <StackBlitzView
                stackBlitzUrl="https://stackblitz.com/edit/web-atoms-binding-demo"
                initialPath="/index.html?mode=mobile"
                file="src/pages/home/Home.tsx,src/pages/one-way-async/OneWayAsyncPage.tsx"
                />
        </div>;
    }

}