import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { Content, Header, InnerContent, InnerHeader } from "@components/placeholders";
import { Div } from "@components/html";
import { InnerItem, Item } from "@components/collection";
import { InnerTab, InnerTabPanel, InnerTabs, Tabs } from "@components/tabs";
import { Lozenge } from "@components/lozenge";
import { PlaceholderMajorIcon } from "@components/icons";
import { Text } from "@components/typography";

<Meta
    title="Components/Tabs"
    id="tabs"
/>

# Tabs

<Tagline>Tabs are used to organize content by grouping similar information on the same page.</Tagline>

<ComponentInfo
    usage={"import { Tabs, Item, Header, Content, TabsContext, useTabsContext } from \"@sharegate/orbit-ui\";"}
    ariaPath="tabpanel"
    githubPath="/packages/components/src/tabs/src"
/>

## Guidelines

### Accessibility

- An accessible title must be provided through [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) property.

## Usage

We recommend specifying a unique `key` prop for every `<Item>`. If you choose to omit the `key` prop, a key matching the `<Item>` position will be generated. For example, `"0"` would be the generated key for the first `<Item>` of a `<Tabs>` component without keys.

### Default

A default tabs.

<Preview>
    <Story name="default">
        <Tabs aria-label="Planets">
            <Item key="mars">
                <Header>Mars</Header>
                <Content>Mars is the fourth planet from the Sun and the second-smallest planet.</Content>
            </Item>
            <Item key="jupiter">
                <Header>Jupiter</Header>
                <Content>Jupiter is the fifth planet from the Sun and the largest in the Solar System.</Content>
            </Item>
            <Item key="venus">
                <Header>Venus</Header>
                <Content>Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.</Content>
            </Item>
        </Tabs>
    </Story>
</Preview>

### Icon

A tab can contain [icons](?path=/docs/icon-gallery--page).

<Preview>
    <Story name="icon">
        <Tabs aria-label="Planets">
            <Item key="mars">
                <Header>Mars</Header>
                <Content>Mars is the fourth planet from the Sun and the second-smallest planet.</Content>
            </Item>
            <Item key="jupiter">
                <Header>
                    <PlaceholderMajorIcon />
                    <Text>Jupiter</Text>
                </Header>
                <Content>Jupiter is the fifth planet from the Sun and the largest in the Solar System.</Content>
            </Item>
            <Item key="venus">
                <Header>Venus</Header>
                <Content>Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.</Content>
            </Item>
        </Tabs>
    </Story>
</Preview>

### Lozenge

A tab can contains a [lozenge](?path=/docs/components-lozenge--default-story).

<Preview>
    <Story name="lozenge">
        <Tabs aria-label="Planets">
            <Item key="mars">
                <Header>Mars</Header>
                <Content>Mars is the fourth planet from the Sun and the second-smallest planet.</Content>
            </Item>
            <Item key="jupiter">
                <Header>
                    <Text>Jupiter</Text>
                    <Lozenge>New</Lozenge>
                </Header>
                <Content>Jupiter is the fifth planet from the Sun and the largest in the Solar System.</Content>
            </Item>
            <Item key="venus">
                <Header>Venus</Header>
                <Content>Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.</Content>
            </Item>
        </Tabs>
    </Story>
</Preview>

### Dynamic tabs

Tabs items can be rendered dynamically.

<Preview>
    <Story name="dynamic tabs">
        <Tabs aria-label="Planets">
            {[
                { id: "mars", header: "Mars", content: "Mars is the fourth planet from the Sun and the second-smallest planet." },
                { id: "jupiter", header: "Jupiter", content: "Jupiter is the fifth planet from the Sun and the largest in the Solar System." },
                { id: "venus", header: "Venus", content: "Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty." }
            ]
                .map(({ id, header, content }) =>
                    <Item key={id}>
                        <Header>{header}</Header>
                        <Content>{content}</Content>
                    </Item>
                )}
        </Tabs>
    </Story>
</Preview>

### Manually activated tabs

By default, tabs are activated automatically. This means when you use the arrow keys to change tabs, the tab is activated and focused.

> The content of a tab should ideally be preloaded. However, if switching to a tab panel causes a network request and possibly a page refresh, there might be some notable latency and this might affect the experience for keyboard and screen reader users.

In this scenario, you should use a manually activated tab, it moves focus without activating the tabs. With focus on a specifc tab, users can activate a tab by pressing ``Space`` or ``Enter``.

<Preview>
    <Story name="manual">
        <Tabs manual aria-label="Planets">
            <Item key="mars">
                <Header>Mars</Header>
                <Content>Mars is the fourth planet from the Sun and the second-smallest planet.</Content>
            </Item>
            <Item key="jupiter">
                <Header>Jupiter</Header>
                <Content>Jupiter is the fifth planet from the Sun and the largest in the Solar System.</Content>
            </Item>
            <Item key="venus">
                <Header>Venus</Header>
                <Content>Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.</Content>
            </Item>
        </Tabs>
    </Story>
</Preview>

### Async content

A tab can use `useTabsContext` to load async content when a tab is selected.

<Preview filePath="/tabs/docs/AsyncTabs" />

### Orientation

A tabs component can be rendered vertically.

<Preview>
    <Story name="orientation">
        <Tabs orientation="vertical" aria-label="Planets">
            <Item key="mars">
                <Header>Mars</Header>
                <Content>Mars is the fourth planet from the Sun and the second-smallest planet.</Content>
            </Item>
            <Item key="jupiter">
                <Header>Jupiter</Header>
                <Content>Jupiter is the fifth planet from the Sun and the largest in the Solar System.</Content>
            </Item>
            <Item key="venus">
                <Header>Venus</Header>
                <Content>Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.</Content>
            </Item>
        </Tabs>
    </Story>
</Preview>

### Fluid

A tabs component can split the width of it's container equally between his tabs.

<Preview>
    <Story name="fluid">
        <Tabs fluid aria-label="Planets">
            <Item key="mars">
                <Header>Mars</Header>
                <Content>Mars is the fourth planet from the Sun and the second-smallest planet.</Content>
            </Item>
            <Item key="jupiter">
                <Header>Jupiter</Header>
                <Content>Jupiter is the fifth planet from the Sun and the largest in the Solar System.</Content>
            </Item>
            <Item key="venus">
                <Header>Venus</Header>
                <Content>Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.</Content>
            </Item>
            <Item key="earth">
                <Header>Earth</Header>
                <Content>Earth is the second planet from the Sun. It is named after the Roman goddess of love and beauty.</Content>
            </Item>
        </Tabs>
    </Story>
</Preview>

### Collapsible

A tabs component can handle horizontal overflow by collapsing the overflowing tabs in a popup.

<Preview>
    <Story name="collapsible">
        <Div width={{ base: "100%", sm: "700px" }}>
            <Tabs fluid aria-label="Planets">
                <Item key="mars">
                    <Header>Mars</Header>
                    <Content>Mars is a dusty, cold, desert world with a very thin atmosphere. There is strong evidence Mars was—billions of years ago—wetter and warmer, with a thicker atmosphere.</Content>
                </Item>
                <Item key="jupiter">
                    <Header>Jupiter</Header>
                    <Content>Jupiter is more than twice as massive than the other planets of our solar system combined. The giant planet's Great Red spot is a centuries-old storm bigger than Earth.</Content>
                </Item>
                <Item key="venus">
                    <Header>Venus</Header>
                    <Content>Venus spins slowly in the opposite direction from most planets. A thick atmosphere traps heat in a runaway greenhouse effect, making it the hottest planet in our solar system.</Content>
                </Item>
                <Item key="earth">
                    <Header>
                        <Text>Earth</Text>
                        <Lozenge>Home</Lozenge>
                    </Header>
                    <Content>Earth—our home planet—is the only place we know of so far that’s inhabited by living things. It's also the only planet in our solar system with liquid water on the surface.</Content>
                </Item>
                <Item key="saturn">
                    <Header>Saturn</Header>
                    <Content>Adorned with a dazzling, complex system of icy rings, Saturn is unique in our solar system. The other giant planets have rings, but none are as spectacular as Saturn's.</Content>
                </Item>
                <Item key="uranus">
                    <Header>Uranus</Header>
                    <Content>Uranus—seventh planet from the Sun—rotates at a nearly 90-degree angle from the plane of its orbit. This unique tilt makes Uranus appear to spin on its side.</Content>
                </Item>
                <Item key="neptune">
                    <Header>Neptune</Header>
                    <Content>Neptune—the eighth and most distant major planet orbiting our Sun—is dark, cold and whipped by supersonic winds. It was the first planet located through mathematical calculations, rather than by telescope.</Content>
                </Item>
                <Item key="pluto">
                    <Header>Pluto</Header>
                    <Content>Pluto is a complex world of ice mountains and frozen plains. Once considered the ninth planet, Pluto is the largest member of the Kuiper Belt and the best known of a new class of worlds called dwarf planets.</Content>
                </Item>
                <Item key="ceres">
                    <Header>Ceres</Header>
                    <Content>Ceres makes up almost a third of the asteroid belt's total mass, but it is still far smaller than Earth's Moon. Ceres is heavily cratered with large amounts of ice underground.</Content>
                </Item>
                <Item key="makemake">
                    <Header>Makemake</Header>
                    <Content>It takes 310 Earth years for Makemake to complete one orbit around our Sun.</Content>
                </Item>
                <Item key="haumea">
                    <Header>Haumea</Header>
                    <Content>Haumea is one of the fastest rotating large objects in our solar system.</Content>
                </Item>
                <Item key="eris">
                    <Header>Eris</Header>
                    <Content>Eris is one of the largest known dwarf planets in our solar system. It's about the same size as Pluto, but it is three times farther from the Sun. One orbit takes about 557 years.</Content>
                </Item>
                <Item key="planet-x">
                    <Header>Planet X</Header>
                    <Content>Caltech researchers have found evidence suggesting there may be a "Planet X" deep in the solar system.</Content>
                </Item>
            </Tabs>
        </Div>
    </Story>
</Preview>

### Disabled

A tab can be disabled.

<Preview>
    <Story name="disabled tab">
        <Tabs aria-label="Planets">
            <Item key="mars">
                <Header>Mars</Header>
                <Content>Mars is the fourth planet from the Sun and the second-smallest planet.</Content>
            </Item>
            <Item disabled key="jupiter">
                <Header>Jupiter</Header>
                <Content>Jupiter is the fifth planet from the Sun and the largest in the Solar System.</Content>
            </Item>
            <Item key="venus">
                <Header>Venus</Header>
                <Content>Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.</Content>
            </Item>
        </Tabs>
    </Story>
</Preview>

### Controlled

The `selectedKey` state can be handled in controlled mode.

<Preview filePath="/tabs/docs/ControlledTabs" />

## API

### Tabs

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

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

### Item

<ComponentInfo
    usage={"import { Item } from \"@sharegate/orbit-ui\";"}
    compact
/>

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

### Header

<ComponentInfo
    usage={"import { Header } from \"@sharegate/orbit-ui\";"}
    slots={["icon", "text", "lozenge"]}
    inherits={[InnerHeader.defaultElement, "styled-component"]}
    compact
/>

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

### Content

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

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

### Tab

<ComponentInfo
    usage={"import { Tab } from \"@sharegate/orbit-ui\";"}
    slots={["icon", "text", "lozenge"]}
    inherits={[InnerTab.defaultElement, "styled-component"]}
    compact
/>

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

### TabPanel

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

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