import { theme } from "app/client/ui2018/cssVars";
import { icon } from "app/client/ui2018/icons";
import { dom, DomArg, IDisposableOwner, styled } from "grainjs";

/**
 * Creates a toggle button - little square button with a dropdown icon inside, used
 * by a context menu for a row inside a grid, a card inside a cardlist and column name.
 */
export function menuToggle(obs: IDisposableOwner, ...args: DomArg[]) {
  const contextMenu = cssMenuToggle(
    icon('Dropdown', dom.cls('menu_toggle_icon')),
    ...args
  );
  return contextMenu;
}

const cssMenuToggle = styled('div.menu_toggle', `
  background: ${theme.menuToggleBg};
  cursor: pointer;
  --icon-color: ${theme.menuToggleFg};
  border: 1px solid ${theme.menuToggleBorder};
  border-radius: 4px;
  &:hover  {
    --icon-color: ${theme.menuToggleHoverFg};
    border-color: ${theme.menuToggleHoverFg};
  }
  &:active  {
    --icon-color: ${theme.menuToggleActiveFg};
    border-color: ${theme.menuToggleActiveFg};
  }
  & > .menu_toggle_icon {
    display: block; /* don't create a line */
  }
`);