import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { Content, InnerContent } from "@components/placeholders";
import { Heading, InnerHeading } from "@components/typography";
import { Illustration } from "@components/illustration";
import { Image } from "@components/image";
import { Inline } from "@components/layout";
import { InnerTile, InnerTileGroup, InnerTileLink, Tile, TileGroup, TileLink } from "@components/tile";
import { Planet, SpacePortraitHorizontal, SpacePortrait } from "./assets";

<Meta
    title="Components/Tile"
    id="tile"
/>

# Tile

<Tagline>A tile groups information into an interactive element to let users browse and take action on a group of related items.</Tagline>

<ComponentInfo
    usage={"import { Tile, TileLink, TileGroup, Heading, Content } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/tile/src"
/>

## Guidelines

### When to use

- To let the user make a choice while giving more context than with a [radio group](?path=/docs/radio-group--default-story) or a [checkbox](?path=/docs/checkbox--default-story).
- To let the user navigate to another page while giving more context than with a [link](?path=/docs/link--default-story).

### Content

- Have an heading and a content.

## Usage

Tiles behaves like a radio button or a checkbox depending if it's used in a [single or multiple selection context](?path=/docs/tile--tile#tilegroup).

### Basic

A tile consists of minimally an heading and some content.

<Preview width={16}>
    <Story name="tile">
        <Tile>
            <Heading>Buy a ticket</Heading>
            <Content>Purchase a ticket for any of our space travel adventure.</Content>
        </Tile>
    </Story>
</Preview>

### Image

A tile can have an [image](?path=/story/chromatic-image--default).

<Preview scope={{ SpacePortraitHorizontal }} width={16}>
    <Story name="image">
        <Tile>
            <Image src={SpacePortraitHorizontal} alt="Planet over another planet" />
            <Heading>Buy a ticket</Heading>
            <Content>Tickets are not refundable and not transferable. A confirmation email will be sent within the next few minutes.</Content>
        </Tile>
    </Story>
</Preview>

Or an [illustration](?path=/docs/illustration--horizontal) with a background color.

<Preview scope={{ Planet }} width={16}>
    <Story name="illustration">
        <Tile>
            <Illustration backgroundColor="alias-accent-light">
                <Image src={Planet} width="100px" alt="Planet" />
            </Illustration>
            <Heading>Buy a ticket</Heading>
            <Content>Tickets are not refundable and not transferable. A confirmation email will be sent within the next few minutes</Content>
        </Tile>
    </Story>
</Preview>

### Checked

A tile can be checked.

<Preview width={16}>
    <Story name="checked">
        <Tile defaultChecked>
            <Heading>Buy a ticket</Heading>
            <Content>Purchase a ticket for any of our space travel adventure.</Content>
        </Tile>
    </Story>
</Preview>

### Disabled

A tile can be disabled.

<Preview width={16}>
    <Story name="disabled">
        <Tile disabled>
            <Heading>Buy a ticket</Heading>
            <Content>Purchase a ticket for any of our space travel adventure.</Content>
        </Tile>
    </Story>
</Preview>

### Orientation

A tile can render horizontally.

<Preview scope={{ SpacePortrait, Planet }}>
    <Story name="orientation">
        <Inline wrap={{ base: true, md: false }}>
            <Tile orientation="horizontal">
                <Image src={SpacePortrait}
                    alt="Space Portrait"
                />
                <Heading>Buy a ticket</Heading>
                <Content>Tickets are not refundable and not transferable. A confirmation email will be sent within the next few minutes.</Content>
            </Tile>
            <Tile orientation="horizontal">
                <Illustration>
                    <Image src={Planet} width="100px" alt="Planet" />
                </Illustration>
                <Heading>Buy a ticket</Heading>
                <Content>Tickets are not refundable and not transferable. A confirmation email will be sent within the next few minutes.</Content>
            </Tile>
        </Inline>
    </Story>
</Preview>

### Controlled

A tite can handle `checked` state in controlled mode.

<Preview filePath="/tile/docs/ControlledTile" width={16} />

## TileLink

A tile can also be navigable. It is similar to a [link](?path=/docs/link--default-story) and it does share the same props.

<Preview width={16}>
    <Story name="link">
        <TileLink href="https://www.virgingalactic.com">
            <Heading>Buy a ticket</Heading>
            <Content>Purchase a ticket for any of our space travel adventure.</Content>
        </TileLink>
    </Story>
</Preview>

### React router

To integrate with a third-party routing library like [React Router](https://reactrouter.com) any link component can be rendered as a [React Router Link](https://reactrouter.com/en/main/components/link) or as any other custom component.

```jsx
import { Link } from "react-router-dom";

const RouterTileLink = as(TileLink, Link);

() => {
    return (
        <RouterTileLink to="/buy">
            <Heading>Buy a ticket</Heading>
            <Content>Purchase a ticket for any of our space travel adventure.</Content>
        </RouterTileLink>
    );
};

```

## TileGroup

Related tiles can be grouped together. By default a tile group doesn't allow any selection. This is usually what you want if you need to group together navigable tiles.

<Preview width={16}>
    <Story name="no selection">
        <TileGroup>
            <TileLink href="https://www.virgingalactic.com">
                <Heading>Buy a ticket</Heading>
                <Content>Purchase a ticket for any of our space travel adventure.</Content>
            </TileLink>
            <TileLink href="https://www.virgingalactic.com">
                <Heading>Refund a ticket</Heading>
                <Content>Get a refund for any space travel adventure ticket.</Content>
            </TileLink>
            <TileLink href="https://www.virgingalactic.com">
                <Heading>Manage Account</Heading>
                <Content>Update your address or any other information related to your account.</Content>
            </TileLink>
        </TileGroup>
    </Story>
</Preview>

### Single selection

A tile group can allow a single selection. This is a behavior similar to a [radio group](?path=/docs/radio-group--default-story).

<Preview width={16}>
    <Story name="single selection">
        <TileGroup selectionMode="single">
            <Tile value="buy">
                <Heading>Buy a ticket</Heading>
                <Content>Purchase a ticket for any of our space travel adventure.</Content>
            </Tile>
            <Tile value="refund">
                <Heading>Refund a ticket</Heading>
                <Content>Get a refund for any space travel adventure ticket.</Content>
            </Tile>
            <Tile value="manage-account">
                <Heading>Manage Account</Heading>
                <Content>Update your address or any other information related to your account.</Content>
            </Tile>
        </TileGroup>
    </Story>
</Preview>

### Multiple selection

A tile group can allow a multiple selection. This is a behavior similar to a [checkbox group](?path=/docs/checkbox--default-story#checkbox-group).

<Preview width={16}>
    <Story name="multiple selection">
        <TileGroup selectionMode="multiple">
            <Tile value="buy">
                <Heading>Buy a ticket</Heading>
                <Content>Purchase a ticket for any of our space travel adventure.</Content>
            </Tile>
            <Tile value="refund">
                <Heading>Refund a ticket</Heading>
                <Content>Get a refund for any space travel adventure ticket.</Content>
            </Tile>
            <Tile value="manage-account">
                <Heading>Manage Account</Heading>
                <Content>Update your address or any other information related to your account.</Content>
            </Tile>
        </TileGroup>
    </Story>
</Preview>

### Row size

A tile group can have multiple tiles on the same row.

<Preview>
    <Story name="row size">
        <TileGroup rowSize={{
            base: "1",
            md: "2",
            lg: "3"
        }}
        >
            <TileLink href="https://www.virgingalactic.com">
                <Heading>Buy a ticket</Heading>
                <Content>Purchase a ticket for any of our space travel adventure.</Content>
            </TileLink>
            <TileLink href="https://www.virgingalactic.com">
                <Heading>Refund a ticket</Heading>
                <Content>Get a refund for any space travel adventure ticket.</Content>
            </TileLink>
            <TileLink href="https://www.virgingalactic.com">
                <Heading>Manage Account</Heading>
                <Content>Update your address or any other information related to your account.</Content>
            </TileLink>
        </TileGroup>
    </Story>
</Preview>

### Wrap

A tile group tiles will wrap on multiple lines automatically.

<Preview>
    <Story name="wrap">
        <TileGroup rowSize={2}>
            <TileLink href="https://www.virgingalactic.com">
                <Heading>Buy a ticket</Heading>
                <Content>Purchase a ticket for any of our space travel adventure.</Content>
            </TileLink>
            <TileLink href="https://www.virgingalactic.com">
                <Heading>Refund a ticket</Heading>
                <Content>Get a refund for any space travel adventure ticket.</Content>
            </TileLink>
            <TileLink href="https://www.virgingalactic.com">
                <Heading>Manage Account</Heading>
                <Content>Update your address or any other information related to your account.</Content>
            </TileLink>
        </TileGroup>
    </Story>
</Preview>

### Controlled

A tile group with selection can handle `value` state in controlled mode.

<Preview filePath="/tile/docs/ControlledTileGroup" />

## API

### Tile

<ComponentInfo
    usage={"import { Tile } from \"@sharegate/orbit-ui\";"}
    slots={["image", "illustration", "heading", "content"]}
    inherits={[InnerTile.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerTile} sort="alpha" />

### TileLink

<ComponentInfo
    usage={"import { TileLink } from \"@sharegate/orbit-ui\";"}
    slots={["image", "illustration", "heading", "content"]}
    inherits={[InnerTileLink.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerTileLink} sort="alpha" />

### TileGroup

<ComponentInfo
    usage={"import { TileGroup } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerTileGroup.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerTileGroup} sort="alpha" />

### Heading

<ComponentInfo
    usage={"import { Heading } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerHeading.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerHeading} sort="alpha" />

### Content

<ComponentInfo
    usage={"import { Content } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerContent.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerContent} sort="alpha" />
