import Bind from "@web-atoms/core/dist/core/Bind";
import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
import XNode from "@web-atoms/core/dist/core/XNode";
import { NavigationService } from "@web-atoms/core/dist/services/NavigationService";
import StyleRule from "@web-atoms/core/dist/style/StyleRule";
import CSS from "@web-atoms/core/dist/web/styles/CSS";
import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
import { MenuItem } from "@web-atoms/web-controls/dist/basic/PopupButton";
import { Drawer } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
import IMenuItem from "../model/IMenuItem";
import DemoPage from "../pages/demo/DemoPage";
import HomePage from "../pages/home/HomePage";

// @web-atoms/samples is name of current package
// to import an image, enter full node style module path
import logo from "@web-atoms/samples/src/images/web-atoms.png";

declare var require: any;

const css = CSS(StyleRule()
    .minWidth(200)
);

export default class DrawerPage extends Drawer {

    public menus: IMenuItem[] = [
        /** When clearHistory is true, drawer will not display back button */
        { label: "Home", value: HomePage, pageOptions: { clearHistory: true } },

        /** parameters will be set on ViewModel for each page when created */
        { label: "Demo 1", value: DemoPage, parameters: { title: "Demo 1", message: "Message 1" } },
        { label: "Demo 2", value: DemoPage, parameters: { title: "Demo 2", message: "Message 2" } },

        /** This will ensure that the page and all its dependents are not included in packed build.
         * This will result in smaller JavaScript, but when user will open this page, this page
         * will be resolved from the root location.
         */
        { label: "About", value: require.resolve("../pages/about/AboutPage") }
    ];

    public selected: IMenuItem = null;

    @InjectProperty
    private navigationService: NavigationService;

    public init() {

        this.renderer = <div class={css}>
            <AtomRepeater
                event-item-click={( { detail: {  value, parameters }}: CustomEvent<IMenuItem>) =>
                    this.navigationService.pushPage(value, parameters , { target: "app"})}
                items={this.menus}
                itemRenderer={(item: IMenuItem) =>
                    <MenuItem label={item.label}/>}
                />
        </div>;
    }

}