import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { Autocomplete } from "@components/autocomplete"
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { DisclosureArrow } from "@components/disclosure";
import { IconButton } from "@components/button";
import { InnerInputGroup, InnerTextAddon, InputGroup } from "@components/input-group";
import { Item } from "@components/collection";
import { Menu, MenuTrigger } from "@components/menu";
import { NumberInput } from "@components/number-input";
import { Select } from "@components/select";
import { Stack } from "@components/layout";
import { Text } from "@components/typography";
import { TextInput } from "@components/text-input";

<Meta
    title="Components/InputGroup"
    id="input-group"
/>

# InputGroup

<Tagline>An input group combines an input component with addons.</Tagline>

<ComponentInfo
    usage={"import { InputGroup, TextAddon, InputGroupContext, useInputGroupProps, useInputGroupAddonProps } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/input-group/src"
/>

## Usage

An input group can combine an input with a *start* addon, an *end* addon or *both*. All Orbit's input can be combined, you can even make it work with a [custom input](#custom-input).

### Default

A default input group.

<Preview>
    <Story name="default">
        <InputGroup>
            <TextInput aria-label="Elapsed days" />
            <Text>days</Text>
        </InputGroup>
    </Story>
</Preview>

### Inputs

An input group can use any Orbit's input component.

<Preview>
    <Story name="inputs">
        <Stack>
            <InputGroup>
                <Text>https://</Text>
                <TextInput aria-label="Url" />
            </InputGroup>
            <InputGroup>
                <NumberInput aria-label="Number of passengers" />
                <Text>passengers</Text>
            </InputGroup>
        </Stack>
    </Story>
</Preview>

### Text addon

An input group can have a textual addon to offer additional hints. A text addon shouldn't replace a [field label](?path=/docs/field--input#label) or a [field description](?path=/docs/field--input#helpmessage).

<Preview>
    <Story name="text addon">
        <InputGroup>
            <Text>https://</Text>
            <TextInput aria-label="Url" />
            <Text>.space</Text>
        </InputGroup>
    </Story>
</Preview>

### Menu addon

An input group can have a menu addon.

<Preview>
    <Story name="menu addon">
        <InputGroup>
            <Autocomplete placeholder="Planets">
                <Item key="earth">Earth</Item>
                <Item key="mars">Mars</Item>
                <Item key="saturn">Saturn</Item>
                <Item key="jupiter">Jupiter</Item>
            </Autocomplete>
            <MenuTrigger>
                <IconButton aria-label="Select a galaxy" variant="secondary">
                    <DisclosureArrow />
                </IconButton>
                <Menu aria-label="Galaxies">
                    <Item key="andromeda">Andromeda</Item>
                    <Item key="milky-way">Milky way</Item>
                    <Item key="virgo">Virgo</Item>
                </Menu>
            </MenuTrigger>
        </InputGroup>
    </Story>
</Preview>

### Select addon

An input group can have a select addon.

<Preview>
    <Story name="select addon">
        <InputGroup>
            <TextInput aria-label="Elapsed time" />
            <Select defaultSelectedKey="days" aria-label="Period">
                <Item key="days">days</Item>
                <Item key="weeks">weeks</Item>
                <Item key="years">years</Item>
            </Select>
        </InputGroup>
    </Story>
</Preview>

### Disabled

An input group can set as disabled the input and the addon(s).

<Preview>
    <Story name="disabled">
        <InputGroup disabled>
            <TextInput aria-label="Duration" />
            <Select defaultSelectedKey="days">
                <Item key="days">days</Item>
                <Item key="weeks">weeks</Item>
                <Item key="years">years</Item>
            </Select>
        </InputGroup>
    </Story>
</Preview>

### Readonly

An input group can set as readonly the input and the addon(s).

<Preview>
    <Story name="readonly">
        <InputGroup readOnly>
            <TextInput aria-label="Elapsed time" />
            <Select defaultSelectedKey="days" aria-label="Period">
                <Item key="days">days</Item>
                <Item key="weeks">weeks</Item>
                <Item key="years">years</Item>
            </Select>
        </InputGroup>
    </Story>
</Preview>

### Fluid

An input group can take the width of its container.

<Preview>
    <Story name="fluid">
        <InputGroup fluid>
            <Text>https://</Text>
            <TextInput aria-label="Url" />
            <Text>.space</Text>
        </InputGroup>
    </Story>
</Preview>

### Custom input

Any input implementing the `InputGroupContext` can integrate with an input group component. This is usually done by using the `useInputGroupProps` hook.

<Preview filePath="/input-group/docs/CustomInput" />

### Custom addon

Any addon implementing the `InputGroupContext` can integrate with an input group component. This is usually done by using the `useInputGroupAddonProps` hook.

<Preview filePath="/input-group/docs/CustomAddon" />

## API

### InputGroup

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

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

### TextAddon

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

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