import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import RadioButton from "../RadioButton";
import { createComponentTemplate } from "../../../storybook/functions/createComponentTemplate";
import { CHECKBOX, DROPDOWN, TOGGLE } from "../../../storybook/components/related-components/component-description-map";
import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
import { Link } from "../../../storybook/components";
import { clickRadioButton, controlRadioButton } from "./interactions";
import { controlledRadioButton } from "./radioButton.stories";
import "./radioButton.stories.scss";

<Meta title="Inputs/Radio Button" component={RadioButton} />

<!--- Component template -->

export const radioButtonTemplate = createComponentTemplate(RadioButton);

<!--- Component documentation -->

# RadioButton

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

A radio represents an item in a single selection list.

<Canvas>
  <Story name="Overview" args={{ text: "Selection" }}>
    {radioButtonTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={RadioButton} />

## Usage

<UsageGuidelines
  guidelines={[
    "A radio lets a user make exactly one selection from a set, which is all visible at the same time.",
    "Set one radio group option as default. Select the most likely or convenient option.",
    "Ensure both label and input are clickable to select the option.",
    "Place radio buttons  can be placed vertically or horizontaly, using 16px spacing."
  ]}
/>

<Tip>
  When there’s limited space or no default selection, consider using a select{" "}
  <Link href="/?path=/docs/inputs-dropdown--overview" size={Link.sizes.SMALL} withoutSpacing>
    Dropdown
  </Link>{" "}
  instead.
</Tip>

## Variants

### kinds

<Canvas>
  <Story name="Kinds">
    <RadioButton kind="primary" text="primary" />
    <RadioButton kind="secondary" text="secondary" />
  </Story>
</Canvas>

### Size

<Canvas>
  <Story name="Size">
    <RadioButton kind="primary" text="large" size="large" />
    <RadioButton kind="secondary" text="large" size="large" />
    <RadioButton kind="primary" text="small" size="small" />
    <RadioButton kind="secondary" text="small" size="small" />
  </Story>
</Canvas>

### Description

<Canvas>
  <Story name="Description">
    <RadioButton
      kind="primary"
      text="Radio Button with description"
      size="large"
      description="Helpful description of the option which may briefly highlight side effects or conditions of the option."
    />
    <RadioButton
      kind="secondary"
      text="Radio Button with description"
      size="small"
      description="Helpful description of the option which may briefly highlight side effects or conditions of the option."
    />
  </Story>
</Canvas>

### States

Radio buttons have 3 states: regular, selected, and disabled.

<Canvas>
  <Story name="States">
    <RadioButton text="Regular" />
    <RadioButton text="Selected" checked />
    <RadioButton text="Disabled" disabled disabledReason="Disabled reason" />
    <RadioButton text="Disabled" checked disabled />
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <DialogContentContainer className="l3-style-radio-buttons_wrapper">
            <RadioButton text="Item 1" name="radio-buttons-group-1" />
            <RadioButton text="Item 2" name="radio-buttons-group-1" defaultChecked />
          </DialogContentContainer>
        ),
        description: "Use radio buttons when only one item can be selected from a list."
      },
      negative: {
        component: (
          <DialogContentContainer className="l3-style-radio-buttons_wrapper">
            <RadioButton text="Item 1" checked />
            <RadioButton text="Item 2" checked />
          </DialogContentContainer>
        ),
        description: (
          <>
            Don't use radio buttons when allowing the user to select more than one item from a list. In this case, use{" "}
            <Link href="/?path=/docs/inputs-checkbox--overview" withoutSpacing>
              checkboxes
            </Link>{" "}
            instead.
          </>
        )
      }
    },
    {
      positive: {
        component: (
          <DialogContentContainer className="l3-style-radio-buttons_wrapper">
            <RadioButton text="Item 1" name="radio-buttons-group-2" defaultChecked />
            <RadioButton text="Item 2" name="radio-buttons-group-2" />
            <RadioButton text="Item 3" name="radio-buttons-group-2" />
          </DialogContentContainer>
        ),
        description: "Mark the first item as selected, and make sure it’s the most common or popular action."
      },
      negative: {
        component: (
          <DialogContentContainer className="l3-style-radio-buttons_wrapper">
            <RadioButton text="Item 1" name="radio-buttons-group-3" />
            <RadioButton text="Item 2" name="radio-buttons-group-3" />
            <RadioButton text="Item 3" name="radio-buttons-group-3" />
          </DialogContentContainer>
        ),
        description: (
          <>
            Don’t leave all radio buttons unselcted. If you can’t offer a smart default, consider using the{" "}
            <Link href="/?path=/docs/inputs-dropdown--overview" withoutSpacing>
              dropdown component.
            </Link>
          </>
        )
      }
    }
  ]}
/>

## Use cases and examples

### Radio button in items list

The user needs to select only one option.

<Canvas>
  <Story name="Radio button in items list" play={clickRadioButton}>
    <div className="l3-style-radio-buttons_wrapper-column">
      <div>Inbox view options</div>
      <RadioButton text="Inbox updates" name="radio-buttons-group-4" defaultChecked />
      <RadioButton text="I was mentioned" name="radio-buttons-group-4" />
      <RadioButton text="All updates" name="radio-buttons-group-4" />
    </div>
  </Story>
</Canvas>

Controled externally.

<Canvas>
  <Story name="Controlled Radio buttons" play={controlRadioButton}>
    {controlledRadioButton.bind({})}
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[CHECKBOX, TOGGLE, DROPDOWN]} />
