import {
  Meta,
  Canvas,
  ArgsTable,
  Story,
  SourceState,
} from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { ORIENTATION, Box, Tooltip } from "../..";
import { Radio } from "./Radio";

<Meta title="Components/Forms/Radio" component={Radio} />

<ComponentHeading
  componentName="Radio"
  description=""
  sourcePath="src/components/Radio/Radio.tsx"
/>

## Installation

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

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Radio">
    <Radio.Group>
      <Radio name="default" label="Choice One" />
      <Radio name="default" label="Choice Two" />
      <Radio name="default" label="Choice Three" />
    </Radio.Group>
  </Story>
</Canvas>

## API

<ArgsTable of={Radio} />

## Demos

### With a tooltip

If you would like to use a Radio as a Tooltip reference element, you will need
to wrap the Radio with a Box in order for the ref to be applied.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Radio with a tooltip">
    <Radio.Group>
      <Radio name="default" label="Choice One" />
      <Radio name="default" label="Choice Two" />
      <Radio name="default" label="Choice Three" />
      <Tooltip
        referenceElement={
          <Box>
            <Radio name="default" label="Choice Four" />
          </Box>
        }
      >
        Choice Four
      </Tooltip>
    </Radio.Group>
  </Story>
</Canvas>

### Disabled

<Canvas withSource={SourceState.OPEN}>
  <Story name="Disabled">
    <Radio.Group>
      <Radio label="Unchecked" />
      <Radio label="Checked" checked />
      <Radio label="Disabled" disabled />
      <Radio label="Checked + Disabled" checked disabled />
    </Radio.Group>
  </Story>
</Canvas>

### Hidden Label

<Canvas withSource={SourceState.OPEN}>
  <Story name="Hidden Label">
    <Radio label="Hide me" isLabelHidden />
  </Story>
</Canvas>

### Group Vertical

<Canvas withSource={SourceState.OPEN}>
  <Story name="Group - Vertical">
    <Radio.Group>
      <Radio name="default" label="Choice One" />
      <Radio name="default" label="Choice Two" />
      <Radio name="default" label="Choice Three" />
    </Radio.Group>
  </Story>
</Canvas>

### Group Horizontal

<Canvas withSource={SourceState.OPEN}>
  <Story name="Group - Horizontal">
    <Radio.Group orientation={ORIENTATION.HORIZONTAL}>
      <Radio name="default" label="Choice One" />
      <Radio name="default" label="Choice Two" />
      <Radio name="default" label="Choice Three" />
    </Radio.Group>
  </Story>
</Canvas>