import Command from "@web-atoms/core/dist/core/Command";
import XNode from "@web-atoms/core/dist/core/XNode";
import styled from "@web-atoms/core/dist/style/styled";
import { ContentPage, Drawer } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
import HomePage from "../pages/home/HomePage";
import logo from "../../images/logo.png";
import MDPage from "../pages/markdown/MDPage";
import AppCommands from "../commands/AppCommands";
import Route from "@web-atoms/core/dist/core/Route";

const menuCss = styled.css `
    cursor: pointer;
    padding: 5px 10px 5px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--link-color);

    &:hover {
        background-color: lightgreen;
        text-decoration: underline;
    }
`.installLocal();

interface IMenuItem {
    label: string;
    icon?: string;
    command?: Command;
    commandLink?: Command;
    openPage?: typeof ContentPage<any>;
    pushPage?: typeof ContentPage<any>;
    pageParameter?: any;
    href?: string;
}

const MenuItem = ({
    label,
    icon = "",
    command,
    commandLink,
    openPage,
    pushPage,
    pageParameter,
    href
}: IMenuItem) => {
    if (commandLink) {
        return <a
            data-click-event="route"
            class={menuCss}
            target="_blank"
            href={commandLink.displayRoute({})}>
            {icon && <i class={icon}/>}
            {label}
        </a>;
    }
    if (href) {
        return <a
            class={menuCss}
            target="_blank"
            href={href}>
            {icon && <i class={icon}/>}
            {label}
        </a>;
    }
    return <div
        class={menuCss}
        data-layout="row"
        event-click={() => command
            ? command.dispatch()
            : ( pushPage
                ? PageNavigator.pushPage(pushPage, pageParameter)
                : PageNavigator.openPage(openPage, pageParameter)
        )}>
        { icon && <i class={icon}/>}
        <span text={label}/>
    </div>;
};

const MDMenu = ({label, url}) => MenuItem({ label, openPage: MDPage, pageParameter: { label, url } });

const css = styled.css `
    width: 200px;
`.installLocal();

export default class AppMenu extends Drawer {

    public async init() {

        this.renderer = <div
            class={css}
            data-layout="vertical-flex">
            <div data-layout="row">
                <img src={logo}/>
                <div text="Web Atoms"/>
            </div>

            <MenuItem
                label="Home"
                openPage={HomePage}
                />
            <MenuItem
                label="Introduction"
                commandLink={AppCommands.introduction}
                />
            <MenuItem
                label="Binding"
                commandLink={AppCommands.binding}
                />
            <MenuItem
                label="Dependency Injection"
                commandLink={AppCommands.dependencyInjection}
                />
            <MenuItem
                label="Ajax"
                commandLink={AppCommands.ajax}
                />
            <MenuItem
                label="Styled Css"
                commandLink={AppCommands.styledCss}
                />

            <MenuItem
                label="Event Re-Routing"
                commandLink={AppCommands.events}
                />

            <MenuItem
                label="We Are Hiring !!"
                commandLink={AppCommands.hiring}
                />


            <MenuItem
                label="Blog"
                href="/blog"
                />

            <MenuItem
                label="Samples"
                href="https://github.com/web-atoms-samples"
                />

            <MenuItem
                label="Previous Versions"
                href="/account/licenses.html"
                />
        </div>;
    }

}

Route.encodeUrl = (url) => {
    if (/(webatoms\.in)|(^\#)/i.test(location.href)) {
        return url;
    }
    return "#!" + url;
};