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

import Flex from '../../flex/Flex';
import Box from '../../box/Box';
import Headline from '../../text/Headline';
import Text from '../../text/Text';
import Button from '../../buttons/Button';

import Radio from './Radio';
import RadioGroup from './RadioGroup';
import RadioA11y from './stories/Radio.a11y.mdx';

<Meta
  title="Components/form/Radio"
  component={Radio}
  argTypes={{
    children: {
      type: 'string',
    },
    description: {
      type: 'string',
    },
    onChange: {
      table: {
        category: 'Events',
      },
    },
  }}
  args={{
    color: 'dark',
    labelSize: 'medium',
  }}
/>

<PageHeader>Radio</PageHeader>

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

## Overview

<Canvas>
  <Story name="Default">{args => <Radio {...args}>Radio label</Radio>}</Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Dark color

<Canvas>
  <Story name="Dark color">
    {args => {
      return (
        <div>
          <StoryVariantTable className="sg-story-variant-table--align-items-top">
            <thead>
              <tr>
                {[null, 'standalone', 'with label', 'with description'].map(
                  (name, index) => (
                    <th>
                      <Headline
                        key={index}
                        extraBold
                        transform="uppercase"
                        as="span"
                        color="text-gray-70"
                        size="small"
                      >
                        {name}
                      </Headline>
                    </th>
                  )
                )}
              </tr>
            </thead>
            <tbody>
              {[
                {
                  type: 'disabled',
                  props: {disabled: true},
                },
                {type: 'enabled'},
                {
                  type: 'error',
                  props: {
                    invalid: true,
                    errorMessage: 'Error message',
                  },
                },
              ].map(RadioType => (
                <tr key={RadioType.type}>
                  <td>
                    <Headline bold color="text-gray-50" size="xsmall">
                      State
                    </Headline>
                    <Headline
                      extraBold
                      transform="uppercase"
                      as="span"
                      color="text-gray-70"
                      size="small"
                    >
                      {RadioType.type}
                    </Headline>
                  </td>
                  <td>
                    <Flex alignItems="center" direction="column">
                      <Radio {...RadioType.props} errorMessage={null} />
                      <Radio {...RadioType.props} checked errorMessage={null} />
                    </Flex>
                  </td>
                  <td>
                    <Flex alignItems="center" direction="column">
                      <Radio {...RadioType.props}>Radio label</Radio>
                      <Radio {...RadioType.props} checked>
                        Radio label
                      </Radio>
                    </Flex>
                  </td>
                  <td>
                    <Flex
                      alignItems="center"
                      direction="column"
                      style={{
                        width: '320px',
                      }}
                    >
                      <Radio
                        {...RadioType.props}
                        description="More detailed description about this element. You can
                          use here even some formatting and links."
                      >
                        Radio label
                      </Radio>
                      <Radio
                        {...RadioType.props}
                        description="More detailed description about this element. You can
                          use here even some formatting and links."
                        checked
                      >
                        Radio label
                      </Radio>
                    </Flex>
                  </td>
                </tr>
              ))}
            </tbody>
          </StoryVariantTable>
        </div>
      );
    }}
  </Story>
</Canvas>

### Light color

<Canvas>
  <Story name="Light color">
    {args => {
      return (
        <div>
          <StoryVariantTable className="sg-story-variant-table--align-items-top">
            <thead>
              <tr>
                {[null, 'standalone', 'with label', 'with description'].map(
                  (name, index) => (
                    <th>
                      <Headline
                        key={index}
                        extraBold
                        transform="uppercase"
                        as="span"
                        color="text-gray-70"
                        size="small"
                      >
                        {name}
                      </Headline>
                    </th>
                  )
                )}
              </tr>
            </thead>
            <tbody>
              {[
                {
                  type: 'disabled',
                  props: {
                    color: 'light',
                    disabled: true,
                  },
                },
                {
                  type: 'enabled',
                  props: {color: 'light'},
                },
                {
                  type: 'error',
                  props: {
                    color: 'light',
                    invalid: true,
                    errorMessage: 'Error message',
                  },
                },
              ].map(RadioType => (
                <tr
                  key={RadioType.type}
                  style={{
                    backgroundColor: '#000',
                  }}
                >
                  <td
                    style={{
                      backgroundColor: 'white',
                    }}
                  >
                    <Headline bold color="text-gray-50" size="xsmall">
                      State
                    </Headline>
                    <Headline
                      extraBold
                      transform="uppercase"
                      as="span"
                      color="text-gray-70"
                      size="small"
                    >
                      {RadioType.type}
                    </Headline>
                  </td>
                  <td>
                    <Flex alignItems="center" direction="column">
                      <Radio {...RadioType.props} errorMessage={null} />
                      <Radio {...RadioType.props} checked errorMessage={null} />
                    </Flex>
                  </td>
                  <td>
                    <Flex alignItems="center" direction="column">
                      <Radio {...RadioType.props}>Radio label</Radio>
                      <Radio {...RadioType.props} checked>
                        Radio label
                      </Radio>
                    </Flex>
                  </td>
                  <td>
                    <Flex
                      alignItems="center"
                      direction="column"
                      style={{
                        width: '320px',
                      }}
                    >
                      <Radio
                        {...RadioType.props}
                        description="More detailed description about this element. You can
                          use here even some formatting and links."
                      >
                        Radio label
                      </Radio>
                      <Radio
                        {...RadioType.props}
                        description="More detailed description about this element. You can
                          use here even some formatting and links."
                        checked
                      >
                        Radio label
                      </Radio>
                    </Flex>
                  </td>
                </tr>
              ))}
            </tbody>
          </StoryVariantTable>
        </div>
      );
    }}
  </Story>
</Canvas>

### With small label

<Canvas>
  <Story name="With small label" args={{labelSize: 'small'}}>
    {args => <Radio {...args}>Radio label</Radio>}
  </Story>
</Canvas>

### With external label

<Canvas>
  <Story name="With external label" args={{value: 'test'}}>
    {args => (
      <label>
        <Flex alignItems="center">
          Radio with external label
          <Radio value={args.value} />
        </Flex>
      </label>
    )}
  </Story>
</Canvas>

### With custom theme

To use custom theme for `Radio`, you can to override following CSS variables:

| Css variable name        | Explanation                                               |
| ------------------------ | --------------------------------------------------------- |
| --radioColor             | Ring color (valid, checked or unchecked)                  |
| --radioHoverColor        | Ring color on mouse hover (valid, checked or unchecked)   |
| --radioInvalidColor      | Ring color (invalid, checked or unchecked)                |
| --radioInvalidHoverColor | Ring color on mouse hover (invalid, checked or unchecked) |
| --radioLabelColor        | Label color                                               |
| --radioDescriptionColor  | Description color                                         |
| --focusColor             | Focus ring color (appears on focus)                       |
| --focusInnerColor        | Color between border and focus ring (appears on focus)    |
| --focusOuterColor        | Glow color of focus ring (appears on focus)               |

There are two ways of achieving custom theming:

1. Change CSS variables for particular `Radio` by defining them inline in the `style` attribute. Example:

```jsx
<Radio checked style={{'--radioColor': 'green'}}>
  Checkbox label
</Radio>
```

2. Or, you can use `className` and define variables replacements in your CSS file. Example:

```css
.sg-radio--custom-theme {
  --radioColor: #fbbe2e;
  --radioHoverColor: #c98600;
  --radioInvalidColor: #cf1d00;
  --radioInvalidHoverColor: #ff341a;
  --focusColor: #c98600;
}
```

In the following example, className `sg-radio--custom-theme` was applied to all `Radio` components. The last component has inline variable override:

<Canvas>
  <Story name="With custom theme" args={{className: 'sg-radio--custom-theme'}}>
    {args => {
      const StyledRadios = styled.div`
        display: flex;
        flex-direction: column;
        .sg-radio--custom-theme {
          --radioColor: #fbbe2e;
          --radioHoverColor: #c98600;
          --radioInvalidColor: #cf1d00;
          --radioInvalidHoverColor: #ff341a;
          --focusOuterColor: rgba(251, 190, 46, 0.3);
          --focusOuterColor: rgba(201, 134, 0, 0.3);
          --focusColor: #c98600;
        }
      `;
      return (
        <StyledRadios>
          <Radio {...args} checked>
            Checked
          </Radio>
          <Radio {...args} invalid>
            Invalid
          </Radio>
          <Radio {...args} checked invalid>
            Invalid, checked
          </Radio>
          <Radio {...args} description="Some description">
            With description
          </Radio>
          <Radio {...args} checked style={{'--radioColor': '#163bf3'}}>
            With inline color override
          </Radio>
        </StyledRadios>
      );
    }}
  </Story>
</Canvas>

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

## Accessibility

<RadioA11y />