/** @jsx jsx */
import React from 'react';
import { css, jsx } from '@emotion/react';
import { ButtonGroup } from '@atlaskit/button';
import { FloatingToolbarButton as Button } from '../ui';

/**
 * Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed
 */
const buttonStyle = css({
  pointerEvents: 'auto'
});
const buttonStyleNoneEvent = css({
  pointerEvents: 'none'
});
const DisallowedWrapper = ({
  disabled,
  ...props
}) => {
  return jsx("div", props);
};

/**
 * The button requires `pointer-events: none;` in order to fix the tooltip, hence
 * leaving us without a disabled cursor, the following fixes this:
 */
const defaultWrapperStyle = css({
  cursor: 'pointer'
});
const disallowedWrapperStyle = css({
  cursor: 'not-allowed'
});
export const LinkToolbarButtonGroup = ({
  options
}) => {
  return jsx(ButtonGroup, null, options.map(({
    onClick,
    selected,
    disabled,
    testId,
    tooltipContent,
    title,
    icon: Icon
  }) => jsx(DisallowedWrapper, {
    css: disabled ? disallowedWrapperStyle : defaultWrapperStyle,
    key: testId,
    disabled: disabled
  }, jsx(Button, {
    css: disabled ? buttonStyleNoneEvent : buttonStyle,
    title: title,
    icon: jsx(Icon, {
      size: "medium",
      label: title
    }),
    selected: selected,
    onClick: onClick,
    testId: testId,
    disabled: disabled,
    tooltipContent: tooltipContent
  }))));
};