import Bind from "@web-atoms/core/dist/core/Bind";
import { UMD } from "@web-atoms/core/dist/core/types";
import XNode from "@web-atoms/core/dist/core/XNode";
import { NavigationService } from "@web-atoms/core/dist/services/NavigationService";
import PopupService from "@web-atoms/core/dist/web/services/PopupService";
import WebApp from "@web-atoms/core/dist/web/WebApp";
import DesktopApp from "@web-atoms/web-controls/dist/desktop-app/DesktopApp";
import MobileApp from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
import DrawerPage from "./drawer/DrawerPage";
import GlobalStyles from "./GlobalStyles";
import HomePage from "./pages/home/HomePage";

GlobalStyles();

export class MainPage extends MobileApp {

    public create() {
        this.drawer = DrawerPage;

        this.app.installStyleSheet("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css");

        PageNavigator.pushPage(HomePage);
    }

}

class DesktopMainPage extends DesktopApp {

    protected create() {
        this.app.installStyleSheet("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css");
        super.create();
    }

    protected init() {

        PopupService.lastTarget = this.element;

        this.menuRenderer = () => <DrawerPage/>;

        this.statusBarRenderer = () => <div data-layout="row">
            <div text="© Web Atoms 2022"/>
            <div data-flex-stretch="full" />
            <a text="Terms & Privacy" target="_blank"/>
        </div>;

        PageNavigator.pushPage(HomePage);
    }

}

const AppClass = /android|iPhone/i.test(navigator.userAgent)
    ? MainPage
    : DesktopMainPage;

export default AppClass;