import {
  Meta,
  Canvas,
  ArgsTable,
  Story,
  SourceState,
} from "@storybook/blocks";
import { Button, ButtonGroup, BUTTON_VARIANT } from "./Button";
import { ICON_TYPE } from "../Icon";
import { Box } from "../Box";
import { MenuRenderer } from "../MenuRenderer";
import { PopoverMenu } from "../PopoverMenu";
import { JUSTIFY } from "../../types";
import { ComponentHeading, EnumTable } from "../../storybook-components";

<Meta title="Components/Buttons/Button Group" component={ButtonGroup} />

<ComponentHeading
  componentName="Button Group"
  description="Specialized container for Button components"
  sourcePath="src/components/Button/ButtonGroup.tsx"
/>

## Installation

```jsx
import { Button } from "@conveyorhq/arrow-ds";
```

## Basic usage

Use `Button.Group` when you have a group of buttons that are related and need to
be displayed next to each other inline. The `Button.Group` will apply equal
margin between buttons.

<Canvas withSource={SourceState.OPEN}>
  <Story name="ButtonGroup">
    <Button.Group>
      <Button>Button</Button>
      <Button>Button</Button>
    </Button.Group>
  </Story>
</Canvas>

### Dos and Don'ts

- **Do** use `Button.Group` with only `Button` components.
- **Don't** use full-width buttons with the justify prop, it won't have
  any effect.
- **Don't** use children that aren't buttons; correct spacing will not
  be applied to non-button elements. Use the [`Stack`](/?path=/docs/components-stack--stack) component instead.

## API

These are the custom props that extend [`BoxProps`](/?path=/docs/components-box--box#all-props).

<ArgsTable of={Button.Group} />
<EnumTable enums={{ JUSTIFY }} />

## Demos

### Full-width

Makes the buttons fill the entire width of the surrounding container.

<Canvas>
  <Story name="Full-width">
    <Button.Group isFullWidth>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Edit</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Copy</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Delete</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Save</Button>
    </Button.Group>
  </Story>
</Canvas>

### Justify around

<Canvas>
  <Story name="Justify around">
    <Button.Group justify={JUSTIFY.AROUND}>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Edit</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Copy</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Delete</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Save</Button>
    </Button.Group>
  </Story>
</Canvas>

### Justify between

<Canvas>
  <Story name="Justify between">
    <Button.Group justify={JUSTIFY.BETWEEN}>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Edit</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Copy</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Delete</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Save</Button>
    </Button.Group>
  </Story>
</Canvas>

### Justify center

<Canvas>
  <Story name="Justify center">
    <Button.Group justify={JUSTIFY.CENTER}>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Edit</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Copy</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Delete</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Save</Button>
    </Button.Group>
  </Story>
</Canvas>

### Justify end

<Canvas>
  <Story name="Justify end">
    <Button.Group justify={JUSTIFY.END}>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Edit</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Copy</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Delete</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Save</Button>
    </Button.Group>
  </Story>
</Canvas>

### Segmented

<Canvas>
  <Story name="Segmented">
    <Button.Group isSegmented>
      <Button>Add Document</Button>
      <Button icon={ICON_TYPE.CARET_DOWN} />
    </Button.Group>
  </Story>
</Canvas>

### With a menu

<Canvas>
  <Story name="With a menu">
    <Button.Group isSegmented>
      <MenuRenderer
        hasPortal
        trigger={(triggerProps, { isOpen }) => (
          <Button {...triggerProps} variant={BUTTON_VARIANT.SECONDARY}>
            {isOpen ? "Close" : "Open"} Menu
          </Button>
        )}
      >
        {({ listProps, itemProps, onClose }) => (
          <PopoverMenu className="w-56" {...listProps}>
            {["Item one", "Item two"].map((item) => (
              <Box
                key={item}
                className="px-4 py-3 rounded-sm"
                onClick={() => {
                  console.log(item);
                  if (typeof onClose === "function") {
                    onClose();
                  }
                }}
                {...itemProps}
              >
                {item}
              </Box>
            ))}
          </PopoverMenu>
        )}
      </MenuRenderer>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Add Document</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Search</Button>
    </Button.Group>
  </Story>
</Canvas>