import {useState} from 'react';
import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {StoryVariant} from '../../../docs/utils';
import {styled} from '@storybook/theming';
import {formatTags} from '../../../docs/utils';
import PageHeader from 'blocks/PageHeader';

import Text from '../../text/Text';
import Headline from '../../text/Headline';
import Flex from '../../flex/Flex';
import Logo from '../../logo/Logo';
import Button from '../../buttons/Button';
import SeparatorHorizontal from '../../separators/SeparatorHorizontal';

import Radio from './Radio';
import RadioGroup from './RadioGroup';
import useRadioContext from './useRadioContext';
import RadioGroupA11y from './stories/RadioGroup.a11y.mdx';
const colorOptions = ['light', 'dark'];

<Meta
  title="Components/Form/Radio group"
  component={RadioGroup}
  argTypes={{
    children: {
      control: {
        disable: true,
      },
    },
    color: {
      control: {
        type: 'radio',
        options: colorOptions,
      },
      table: {
        type: {
          summary: formatTags(colorOptions),
        },
      },
    },
    onChange: {
      table: {
        category: 'Events',
      },
    },
  }}
  parameters={{
    docs: {
      inlineStories: false,
    },
  }}
/>

<PageHeader>RadioGroup</PageHeader>

- [Stories](#stories)
- [Accessibility](#accessibility)

## Overview

<Canvas>
  <Story
    name="Default"
    height="120px"
    args={{name: 'option', value: 'option-a'}}
  >
    {args => (
      <RadioGroup {...args}>
        <Radio value="option-a">Option A</Radio>
        <Radio value="option-b">Option B</Radio>
      </RadioGroup>
    )}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Disabled

<Canvas>
  <Story
    name="Disabled"
    height="180px"
    args={{name: 'option', value: 'option-a', disabled}}
  >
    {args => (
      <RadioGroup {...args}>
        <Radio
          value="option-a"
          description="More detailed description about Option A."
        >
          Option A
        </Radio>
        <Radio value="option-b">Option B</Radio>
        <Radio value="option-c">Option C</Radio>
      </RadioGroup>
    )}
  </Story>
</Canvas>

### With error

<Canvas>
  <Story
    name="With error"
    height="210px"
    args={{
      name: 'option',
      value: 'option-a',
      invalid: true,
      errorMessage: 'Error message',
    }}
  >
    {args => (
      <RadioGroup {...args}>
        <Radio
          value="option-a"
          description="More detailed description about Option A."
        >
          Option A
        </Radio>
        <Radio value="option-b">Option B</Radio>
        <Radio value="option-c">Option C</Radio>
      </RadioGroup>
    )}
  </Story>
</Canvas>

### With group of custom wrappers

In following example, we use `label` as a card wrapper which handles clicks and keyboard navigation, but at the same time we define label and description inside using `aria-labelledby` and `aria-describedby`. This is so screen readers can determine what's a primary and secondary information.
For more complex example see [useRadioContext documentation](/docs/hooks-useradiocontext--page#example).

<Canvas>
  <Story name="With group of custom wrappers" height="500px">
    {args => {
      const CustomRadioComponent = ({
        value,
        height = '120px',
        alignItems = 'flex-start',
      }) => {
        const {selectedValue} = useRadioContext();
        const labelId = `label-${value}`;
        const descriptionId = `description-${value}`;
        return (
          <label
            style={{
              width: '360px',
              height: height,
              marginBottom: '8px',
              border: '2px solid black',
              borderColor: value === selectedValue ? 'black' : '#e1eaf1',
              borderRadius: '8px',
              padding: '8px',
              display: 'flex',
              alignItems: alignItems,
              justifyContent: 'space-between',
            }}
          >
            <Flex direction="column">
              <Text id={labelId} weight="bold">
                Label {value}
              </Text>
              <Text id={descriptionId} size="small">
                Description
              </Text>
            </Flex>
            <Radio
              value={value}
              aria-labelledby={labelId}
              aria-describedby={descriptionId}
            />
          </label>
        );
      };
      return (
        <Flex fullWidth direction="row" justifyContent="space-evenly" wrap>
          <Flex
            direction="column"
            style={{
              margin: '20px',
            }}
          >
            <Headline
              align="to-center"
              extraBold
              size="xlarge"
              style={{
                marginBottom: '20px',
              }}
            >
              Short component:
            </Headline>
            <RadioGroup name="short" value="2" direction="column">
              <CustomRadioComponent
                value="1"
                height="80px"
                alignItems="center"
              />
              <CustomRadioComponent
                value="2"
                height="80px"
                alignItems="center"
              />
              <CustomRadioComponent
                value="3"
                height="80px"
                alignItems="center"
              />
              <CustomRadioComponent
                value="4"
                height="80px"
                alignItems="center"
              />
            </RadioGroup>
          </Flex>
          <Flex
            direction="column"
            style={{
              margin: '20px',
            }}
          >
            <Headline
              align="to-center"
              extraBold
              size="xlarge"
              style={{
                marginBottom: '20px',
              }}
            >
              Tall component:
            </Headline>
            <RadioGroup name="tall" value="2" direction="column">
              <CustomRadioComponent value="1" />
              <CustomRadioComponent value="2" />
              <CustomRadioComponent value="3" />
            </RadioGroup>
          </Flex>
        </Flex>
      );
    }}
  </Story>
</Canvas>

`CustomRadioComponent` code:

```jsx
const CustomRadioComponent = ({
  value,
  height = '120px',
  alignItems = 'flex-start',
}) => {
  const {selectedValue} = useRadioContext();
  const labelId = `label-${value}`;
  const descriptionId = `description-${value}`;
  return (
    <label
      style={{
        width: '360px',
        height: height,
        marginBottom: '8px',
        border: '2px solid black',
        borderColor: value === selectedValue ? 'black' : '#e1eaf1',
        borderRadius: '8px',
        padding: '8px',
        display: 'flex',
        alignItems: alignItems,
        justifyContent: 'space-between',
      }}
    >
      <Flex direction="column">
        <Text id={labelId} weight="bold">
          Label {value}
        </Text>
        <Text id={descriptionId} size="small">
          Description
        </Text>
      </Flex>
      <Radio
        value={value}
        aria-labelledby={labelId}
        aria-describedby={descriptionId}
      />
    </label>
  );
};
```

### With switch between radio groups

<Canvas>
  <Story
    name="With switch between radio groups"
    height="120px"
    args={{name: 'rg1', value: 'option-a'}}
  >
    {args => {
      const [displayPage1, setDisplayPage1] = useState(true);
      return (
        <div>
          <div>
            <Button onClick={() => setDisplayPage1(!displayPage1)} size="s">
              click to toggle page
            </Button>
          </div>
          {displayPage1 ? (
            <RadioGroup key="rg1" {...args}>
              <Radio value="option-a">Option A</Radio>
              <Radio value="option-b">Option B</Radio>
              <Radio value="option-c">Option C</Radio>
            </RadioGroup>
          ) : (
            <RadioGroup key="rg2" name="rg2" value="option-2">
              <Radio value="option-1">Option 1</Radio>
              <Radio value="option-2">Option 2</Radio>
            </RadioGroup>
          )}
        </div>
      );
    }}
  </Story>
</Canvas>

### With controlled RadioGroup

<Canvas>
  <Story
    name="With controlled RadioGroup"
    height="120px"
    args={{name: 'optionA', value: 'option-a'}}
  >
    {args => {
      const [value, setValue] = useState(null);
      return (
        <div>
          <div>
            <Button
              onClick={() =>
                setValue(value === 'option-a' ? 'option-b' : 'option-a')
              }
              size="s"
            >
              click to toggle active radio
            </Button>
          </div>
          <RadioGroup {...args} value={value}>
            <Radio value="option-a">Option A</Radio>
            <Radio value="option-b">Option B</Radio>
            <Radio value="option-c">Option B</Radio>
          </RadioGroup>
        </div>
      );
    }}
  </Story>
</Canvas>

## Accessibility

<RadioGroupA11y />