import FlySelect from "./FlySelect";
import Avatar from "../../media/Avatar/Avatar";
import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";

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

## Basic (Options = Array)

<Canvas>
	<Story name="Options = Array">
		<FlySelect
			options={["Test 1", "Test 2"]}
			onChange={() => console.log("onChange")}
			value="Test 1"
		/>
	</Story>
</Canvas>

## Basic (Options = Object)

<Canvas>
	<Story name="Options = Object">
		<FlySelect
			options={{
				a: "Example A",
				b: "Example B",
			}}
			onChange={() => console.log("onChange")}
			value="b"
		/>
	</Story>
</Canvas>

## Has secondary text and various option icons

<div>
	<FlySelect
		style={{ width: "350px" }}
		options={{
			a: {
				label: "Example A",
				secondaryText: "This is a test",
				download: true,
			},
			c: {
				label: "Example B",
				icon: (
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
						<path d="M13 13h10a1 1 0 1 0 0-2H13V1a1 1 0 0 0-2 0v10H1a1 1 0 1 0 0 2h10v10a1 1 0 1 0 2 0z"></path>
					</svg>
				),
			},
		}}
		onChange={() => console.log("onChange")}
		value="a"
	/>
</div>

## Placeholder

<Canvas>
	<Story name="Placeholder">
		<FlySelect
			options={["Example C", "Example D"]}
			onChange={() => console.log("onChange")}
			placeholder="Select Something!"
		/>
	</Story>
</Canvas>

## Constrained Width

<Canvas>
	<Story name="Constrained Width">
		<div style={{ width: "150px" }}>
			<FlySelect
				options={["Example C Testing 123", "Example D Testing 123"]}
				onChange={() => console.log("onChange")}
				placeholder="Select Something!"
			/>
		</div>
	</Story>
</Canvas>

## Option groups with striped rows:

<Canvas>
	<Story name="Striped">
		<div style={{ width: "150px" }}>
			<FlySelect
				optionGroups={{
					active: {
						label: "Active Items",
					},
					inactive: {
						label: "Inactive Items",
					},
				}}
				options={{
					a: {
						label: "Item A",
						optionGroup: "active",
					},
					b: {
						disabled: true,
						label: "Item B",
						optionGroup: "inactive",
						secondaryText: "(deactivated)",
					},
					c: {
						label: "Item C",
						optionGroup: "active",
					},
					d: {
						label: "Item D",
						optionGroup: "active",
					},
					e: {
						label: "Item E",
						optionGroup: "active",
					},
				}}
				onChange={() => console.log("onChange")}
				placeholder="Select Something!"
				striped={true}
			/>
		</div>
	</Story>
</Canvas>

## Using an Avatar within a form FlySelect

<Canvas>
	<Story name="Avatar">
		<div>
			<div className="FormRow">
				<div className="FormField">
					<FlySelect
						style={{ width: "350px" }}
						options={{
							a: {
								label: "Me",
								icon: (
									<Avatar
										size="s"
										src="https://getflywheel.com/wp-content/uploads/2015/02/flyheadshots-4-copy.jpg"
										type="user"
									/>
								),
							},
							c: {
								label: "Flywheel",
								icon: (
									<Avatar
										size="s"
										src="https://avatars2.githubusercontent.com/u/2371558?s=400&v=4"
										type="team"
									/>
								),
							},
						}}
						onChange={() => console.log("onChange")}
						value="a"
					/>
				</div>
			</div>
		</div>
	</Story>
</Canvas>