import XNode from "@web-atoms/core/dist/core/XNode";

import "./styles/popup-button.global.css";
import InlinePopupButton, { IPopupButton } from "./InlinePopupButton";

export interface IMenuItem {
    label?: string;
    icon?: string;
    eventClick?: any;
    href?: string;
    target?: string;
    [key: string]: any;
}

// export interface IPopupButton {
//     icon?: string;
//     label?: string;
//     showAsDialog?: boolean;
//     [key: string]: any;
// }

export function MenuItem({
    label,
    icon,
    eventClick,
    href,
    target,
    ... others
}: IMenuItem) {

    if (href) {
        return <a data-menu-item="menu-item" href={href} target={target} { ... others }>
            { icon && <i data-element="icon" class={icon}/>}
            { label && <span data-element="label" text={label}/>}
        </a>;
    }

    return <div data-menu-item="menu-item" eventClick={eventClick} { ... others }>
        { icon && <i data-element="icon" class={icon}/>}
        { label && <span data-element="label" text={label}/>}
    </div>;
}




export default InlinePopupButton;

export function PopupActionButton(a: IPopupButton, ... nodes: XNode[]) {
    a.closeOnClick ??= true;
    a["anchor-top"] = "parent-bottom";
    a["anchor-right"] = "parent-left";
    return InlinePopupButton(a, ... nodes);
}

// export default function PopupButton(
// {
//     icon,
//     label,
//     showAsDialog,
//     ... others
// }: IPopupButton,
// ... menus: Array<IMenuItem | XNode>) {

//     let popup: IPopup = null;
//     function openPopup(s: AtomControl, e: Event) {
//         const button = e.currentTarget as HTMLElement;
//         button.classList.add("pressed");
//         if (popup) {
//             popup.dispose();
//             popup = null;
//             return;
//         }

//         const menu = document.createElement("div");
//         (s as any).render(<div data-menu-items="menu-items">
//             { ... menus}
//         </div>, menu);

//         const options: IPopupOptions = showAsDialog
//             ? {
//                 alignment: "centerOfScreen",
//                 popupStyle: ".none"
//             }
//             : {
//                 alignment: "bottomLeft",
//                 popupStyle: ".none"
//             };
//         popup = PopupService.show(button, menu, options);

//         const clickHandler = (e) => {
//             let start = e.target as HTMLElement;
//             const body = document.body;
//             while (start) {
//                 if (start === body) {
//                     return;
//                 }
//                 if (start.dataset.menuItem === "menu-item") {
//                     break;
//                 }
//                 start = start.parentElement;
//             }
//             popup?.dispose();
//             popup = null;
//         };

//         menu.addEventListener("click", clickHandler);

//         popup.registerDisposable(() => {
//             button.classList.remove("pressed");
//             menu.removeEventListener("click", clickHandler);
//             popup = null;
//         });
//     }

//     if (label) {
//         return <button
//             { ... others }
//             eventClick={Bind.event((s, e) => openPopup(s as AtomControl, e))}>
//             <label class={iconLabelCss}>
//                 <i class={icon}/>
//                 <span>{label}</span>
//             </label>
//         </button>;
//     }

//     return <button
//         { ... others }
//         eventClick={Bind.event((s, e) => openPopup(s as AtomControl, e))}>
//         <i class={icon}/>
//     </button>;
// }