import RadioBlock from "./RadioBlock";
import { Tooltip } from "../../overlays/Tooltip/Tooltip";
import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
import { Text } from '../../text/Text/Text';
import { default as TextButtonExternal } from '../../buttons/TextButtonExternal/TextButtonExternal';
import { default as radioBlockOptions } from './RadioBlockContentExample'

<Meta title="Inputs/RadioBlock" component={RadioBlock} />

# Simple RadioBlock example

<Canvas>
	<Story name="RadioBlock">
		<RadioBlock
			onChange={() => console.log("onChange")}
			default={"test1"}
			options={{
				test1: {
					label: "Test 1",
				},
				test2: {
					label: "Test 2",
				},
			}}
		/>
	</Story>
</Canvas>

# RadioBlock with description example

<Canvas>
	<Story name="RadioBlock Description">
		<RadioBlock
			onChange={() => console.log("onChange")}
			default={"test1"}
			options={{
				test1: {
					label: "Test 1",
					content: (
						<>
							<Text>
								This is a description for option 1, Test 1
							</Text>
							<TextButtonExternal
								underline
								inline={false}
								onClick={(event) => {event.stopPropagation();}}
							>
								Click me!
							</TextButtonExternal>
						</>
					),
				},
				test2: {
					label: "Test 2",
					content: (
						<>
							<Text>
								This is a description for option 2, Test 2
							</Text>
							<TextButtonExternal
								underline
								inline={false}
								onClick={(event) => {event.stopPropagation();}}
							>
								Click me!
							</TextButtonExternal>
						</>
					),
				},
			}}
		/>
	</Story>
</Canvas>

# RadioBlock with description disabled tooltip example

<Canvas>
	<Story name="RadioBlock Description Disabled Tooltip">
		<RadioBlock
			onChange={() => console.log("onChange")}
			default={"test1"}
			options={{
				test1: {
					label: "Test 1",
					content: (
						<>
							<Text>
								This is a description for option 1, Test 1
							</Text>
							<TextButtonExternal
								underline
								inline={false}
								onClick={(event) => {event.stopPropagation();}}
							>
								Click me!
							</TextButtonExternal>
						</>
					),
				},
				test2: {
					label: "Test 2",
					disabled: true,
					content: (
						<>
							<Text>
								This is a description for option 2, Test 2
							</Text>
							<TextButtonExternal
								underline
								inline={false}
								onClick={(event) => {event.stopPropagation();}}
							>
								Click me!
							</TextButtonExternal>
						</>
					),
					container: {
						element: (
							<Tooltip
								forceShow
								content={
									<div>
										Hey, this option's disabled.
										<br />
										<a>Here's why</a>
									</div>
								}
							/>
						),
					},
				},
			}}
		/>
	</Story>
</Canvas>

# RadioBlock with with just content example

<Canvas>
	<Story name="RadioBlock Content">
		<RadioBlock
			heightSize="none"
			direction="vert"
			options={radioBlockOptions}
			onChange={(value) => console.log("onChange: ", value)}
		/>
	</Story>
</Canvas>

# Disable the entire component

<Canvas>
	<Story name="Disabled">
		<RadioBlock
			disabled={true}
			onChange={() => console.log("onChange")}
			default={"test1"}
			options={{
				test1: {
					label: "Test 1",
				},
				test2: {
					label: "Test 2",
				},
			}}
		/>
	</Story>
</Canvas>

# Disable a single option and select the other

<Canvas>
	<Story name="Disabled Option">
		<RadioBlock
			onChange={() => console.log("onChange")}
			default={"test2"}
			options={{
				test1: {
					disabled: true,
					label: "Test 1",
				},
				test2: {
					label: "Test 2",
				},
			}}
		/>
	</Story>
</Canvas>

# Warning set on the component

<Canvas>
	<Story name="Warning">
		<RadioBlock
			warn={true}
			onChange={() => console.log("onChange")}
			default={"test1"}
			options={{
				test1: {
					label: "Test 1",
				},
				test2: {
					label: "Test 2",
					disabled: true,
				},
			}}
		/>
	</Story>
</Canvas>

# Medium size RadioBlock

<Canvas>
	<Story name="Medium Size">
		<RadioBlock
			heightSize="m"
			onChange={() => console.log("onChange")}
			default={"test1"}
			options={{
				test1: {
					label: "Test 1",
				},
				test2: {
					label: "Test 2",
				},
			}}
		/>
	</Story>
</Canvas>

# Disable the 2nd item and show a tooltip on hover

<Canvas>
	<Story name="Tooltip">
		<RadioBlock
			heightSize="m"
			onChange={() => console.log("onChange")}
			default={"test1"}
			options={{
				test1: {
					label: "Test 1",
				},
				test2: {
					label: "Test 2",
					disabled: true,
					container: {
						element: (
							<Tooltip
								content={
									<div>
										Hey, this option's disabled.
										<br />
										<a>Here's why</a>
									</div>
								}
							/>
						),
					},
				},
			}}
		/>
	</Story>
</Canvas>

# Vertical layout

<Canvas>
	<Story name="Vertical">
		<RadioBlock
			direction="vert"
			heightSize="m"
			default={"test1"}
			options={{
				test1: {
					label: "Test 1",
				},
				test2: {
					label: "Test 2",
				},
			}}
		/>
	</Story>
</Canvas>