import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
import { OptionButton } from "./OptionButton";
import { Box } from "../Box";
import { Button, BUTTON_SIZE } from "../Button";
import { Modal } from "../Modal";
import { Stack } from "../Stack";
import { useDisclosure } from "../../hooks";
import { JUSTIFY } from "../../types";

<Meta title="Components/Buttons/Option Button" component={OptionButton} />

# Option button

The option button component is a fancy radio button used as an option selector.

```jsx
import { OptionButton } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="OptionButton">
    <OptionButton
      heading="Manual"
      description="Don’t create any tickets for me, I’ll make them myself."
    />
  </Story>
</Preview>

## Props

These are the custom props that extend `React.HTMLProps<HTMLInputElement>`. Full list of props <a href="#all-props">below</a>.

<Props of={OptionButton} />

## Demos

### Within Stack

The main use case for the option button is to display multiple within a [`Stack`](/?path=/docs/components-stack--stack) component. Make sure each option button has a unique `value` but shares the same `name`.

<Preview>
  <Story name="Within Stack">
    <Stack spacing={4}>
      <OptionButton
        heading="Manual"
        description="Don’t create any tickets for me, I’ll make them myself."
        name="template"
        value="manual"
      />
      <OptionButton
        heading="Basic Recurring"
        description="Create tickets based on a single recurring schedule, without an asset type."
        name="template"
        value="basic"
      />
      <OptionButton
        heading="Asset Based"
        description="Set a default, then create individual recurring or event-based schedules for any asset."
        name="template"
        value="asset"
      />
    </Stack>
  </Story>
</Preview>

### Within Modal

<Preview>
  <Story name="Within Modal">
    {() => {
      const { isOpen, onOpen, onClose } = useDisclosure();
      return (
        <Box>
          <Button onClick={onOpen}>Show Modal</Button>
          <Modal
            title="Modal with OptionButtons"
            isOpen={isOpen}
            onClose={onClose}
          >
            <Modal.Body>
              <Stack spacing={4}>
                <OptionButton
                  heading="Manual"
                  description="Don’t create any tickets for me, I’ll make them myself."
                  name="template"
                  value="manual"
                />
                <OptionButton
                  heading="Basic Recurring"
                  description="Create tickets based on a single recurring schedule, without an asset type."
                  name="template"
                  value="basic"
                />
                <OptionButton
                  heading="Asset Based"
                  description="Set a default, then create individual recurring or event-based schedules for any asset."
                  name="template"
                  value="asset"
                />
              </Stack>
            </Modal.Body>
            <Modal.Footer>
              <Stack justify={JUSTIFY.END}>
                <Button size={BUTTON_SIZE.LARGE}>Some important action</Button>
              </Stack>
            </Modal.Footer>
          </Modal>
        </Box>
      );
    }}
  </Story>
</Preview>

## All Props

Any valid attribute of `React.HTMLProps<HTMLInputElement>` is available to the option button component.

<Props of={OptionButton} />