Context Menu

"use client";

import {
  Button,
  ContextMenu,
  IconExpandDown,
  IconSettings,
  IconMagic,
  IconDeleteBin5,
  Menu,
} from "@brynlabs/fusion-ui";
import React, {useRef} from "react";

export const ContextMenuExample = () => {
  const contextMenu: Menu = [
    {
      items: [
        {
          title: "Open",
          callback: () => console.log("Open clicked"),
        },
        {
          title: "Rename",
          callback: () => console.log("Rename clicked"),
        },
      ],
    },
    {
      title: "Options",
      items: [
        {
          icon: <IconSettings />,
          title: "Options",
          children: [
            {
              title: "Duplicate",
              callback: () => console.log("Duplicate clicked"),
            },
            {
              title: "Share",
              callback: () => console.log("Share clicked"),
            },
          ],
        },
        {
          title: "More Options",
          children: [
            {
              title: "Edit",
              callback: () => console.log("Edit clicked"),
            },
            {
              title: "More more Options",
              children: [
                {
                  title: "Do something",
                  callback: () => console.log("Do something clicked"),
                },
                {
                  title: "More more more Options",
                  children: [
                    {
                      title: "Do something more",
                      children: [
                        {
                          title: "Do something more more",
                          callback: () => console.log("Do something more more clicked"),
                        },
                      ],
                    },
                    {
                      title: "Do something even more",
                      callback: () => console.log("Do something even more clicked"),
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
    {
      items: [
        {
          icon: <IconDeleteBin5 />,
          title: "Delete",
          callback: () => console.log("Delete clicked"),
        },
      ],
    },
  ];

  const dropDownList: Menu = [
    {
      items: [
        {
          title: "Apple",
          callback: () => console.log("Apple clicked"),
        },
        {
          title: "Banana",
          callback: () => console.log("Banana clicked"),
        },
        {
          icon: <IconMagic />,
          title: "Orange",
          callback: () => console.log("Orange clicked"),
        },
      ],
    },
  ];

  const buttonRef = useRef<HTMLButtonElement>(null);

  return (
    <div style={{display: "flex", flexDirection: "row", gap: "20px"}}>
      <ContextMenu menu={contextMenu} trigger="rightClick">
        <Button color="primary">Right Click</Button>
      </ContextMenu>

      <ContextMenu menu={contextMenu} trigger="leftClick">
        <Button color="primary">Left Click</Button>
      </ContextMenu>

      <ContextMenu menu={dropDownList} trigger="leftClick" origin="element">
        <Button color="primary" ref={buttonRef}>
          Dropdown
          <IconExpandDown />
        </Button>
      </ContextMenu>
    </div>
  );
};