import { HomeIcon } from '@heroicons/react/24/outline';
import {
  Dock,
  Toolbar,
  ToolbarItem,
  ToolbarItemGroup,
  ToolbarItemMenu,
  ToolbarItems,
  useToolbarItemContext
} from '@stereograph/teiaviewer';

/**
 * Setup a Dock
 */
export const CustomDock = () => {
  return (
    <Dock>
      <ToolbarItemGroup>
        <ToolbarItems.ResetScene />
        <ToolbarItems.CameraZoomIn />
        <ToolbarItems.CameraZoomOut />
        <ToolbarItemMenu icon={HomeIcon} label="MyMenu">
          <ToolbarItems.UndoCommand />
          <ToolbarItems.RedoCommand />
        </ToolbarItemMenu>
      </ToolbarItemGroup>
    </Dock>
  );
};

/**
 * Setup a Toolbar
 */
export const CustomToobar = () => {
  return (
    <Toolbar>
      <ToolbarItemGroup>
        <ToolbarItems.ResetScene />
        <ToolbarItems.CameraZoomIn />
        <ToolbarItems.CameraZoomOut />
        <ToolbarItems.UndoCommand />
        <ToolbarItems.RedoCommand />
      </ToolbarItemGroup>
    </Toolbar>
  );
};

/**
 * Setup a Custom ToolbarItem
 * Note: DO NOT return anything around ToolbarItem
 */
export function CustomToolbarItem() {
  const onClick = () => {
    // Do something
  };

  return <ToolbarItem icon={HomeIcon} label="CustomItem" onClick={onClick} />;
}

/**
 * Setup a Custom ToolbarItem with CustomContent inside the button
 */
export function CustomContentToolbarItem() {
  const onClick = () => {
    // Do something
  };

  return (
    <ToolbarItem
      icon={HomeIcon}
      label="CustomItem"
      onClick={onClick}
      CustomButtonContent={<div>My Custom content</div>}
    />
  );
}

/**
 * Close the parent menu from the child item
 */
export function CloseParentToolbarItem() {
  const { closeParentMenu } = useToolbarItemContext();

  const onClick = () => {
    closeParentMenu();
  };

  return <ToolbarItem icon={HomeIcon} label="CustomItem" onClick={onClick} />;
}