import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
import { Link } from "../Link";
import { Icon, ICON_TYPE } from "../Icon";
import { Token, TOKEN_STATUS } from "./Token";

<Meta title="Components/Data/Token" component={Token} />

export const RouterLink = ({ to, children, ...rest }) => (
  <a href={to} {...rest}>
    {children}
  </a>
);

# Token

```jsx
import { Token } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="Token">
    <Token>Token</Token>
  </Story>
</Preview>

## Custom Props

These are the custom props that extend [`BoxProps`](/?path=/docs/components-box--box).

<Props of={Token} />

## `Token.Group` Custom Props

`Token.Group` simply extends [`StackProps`](/?path=/docs/components-stack--stack).

## Demos

### With Label

<Preview>
  <Story name="With Label">
    <Token label="Label">Value</Token>
  </Story>
</Preview>

### Danger variant

<Preview>
  <Story name="Danger Token">
    <Token.Group>
      <Token variant={TOKEN_STATUS.DANGER}>Missing Asset</Token>
      <Token variant={TOKEN_STATUS.DANGER} label="Oops">
        Missing Asset
      </Token>
      <Token variant={TOKEN_STATUS.DANGER} removable onRemove={() => {}}>
        Missing Asset
      </Token>
    </Token.Group>
  </Story>
</Preview>

### Removable

<Preview columns={2}>
  <Story name="Removable Token">
    <Token removable onRemove={() => {}} label="Label">
      Value
    </Token>
  </Story>
  <Story name="Removable No Label">
    <Token removable onRemove={() => {}}>
      Value
    </Token>
  </Story>
</Preview>

### Group

<Preview isColumn>
  <Story name="Token Group Static">
    <Token.Group>
      <Token>People</Token>
      <Token>SaaS Systems</Token>
      <Token>Roles</Token>
    </Token.Group>
  </Story>
  <Story name="Token Group Removable">
    <Token.Group>
      <Token removable onRemove={() => {}}>
        People
      </Token>
      <Token removable onRemove={() => {}}>
        SaaS Systems
      </Token>
      <Token removable onRemove={() => {}}>
        Roles
      </Token>
    </Token.Group>
  </Story>
</Preview>

### Filter Token

<Preview>
  <Story name="Filter Token">
    <Token removable onRemove={() => {}} label="Type:">
      User
    </Token>
  </Story>
</Preview>

### Filter Token Multiple Selections

<Preview>
  <Story name="Filter Token Multiple Selections">
    <Token removable onRemove={() => {}} label="Asset:">
      People, SaaS Systems, Roles, 1 more
    </Token>
  </Story>
</Preview>

### Filter Token Group

<Preview>
  <Story name="Filter Token Group">
    <Token.Group>
      <Token removable onRemove={() => {}} label="Type:">
        User
      </Token>
      <Token removable onRemove={() => {}} label="Search:">
        &quot;John Smith&quot;
      </Token>
      <Token removable onRemove={() => {}} label="Asset:">
        People, SaaS Systems, Roles, 1 more
      </Token>
    </Token.Group>
  </Story>
</Preview>

### Token Group multiple lines

<Preview>
  <Story name="Token Group multiple lines">
    <Token.Group className="w-1/2">
      {[
        "Red",
        "Cyan",
        "Blue",
        "DarkBlue",
        "LightBlue",
        "Purple",
        "Yellow",
        "Lime",
        "Magenta",
        "White",
        "Silver",
        "Gray",
        "Black",
        "Orange",
        "Brown",
        "Maroon",
        "Green",
        "Olive",
      ].map((item) => (
        <Token key={item}>{item}</Token>
      ))}
    </Token.Group>
  </Story>
</Preview>

### Composable examples

#### Using a Link

In this example, we can compose a token with a link.

It requires us to reset some layout styles on the token and re-apply them on the
link. We also need to apply some additional visual styles to add some polish.

<Preview>
  <Story name="Composable example with Link">
    <Token className="px-0 h-auto ease-all-md hover:bg-gray-400">
      <Link
        as={RouterLink}
        to="/"
        className="text-gray-700 px-3 h-8 flex items-center rounded focus:outline-none focus:shadow-focus"
        noStyles
      >
        Monthly Access Control Review
        <Icon
          className="text-iconSm text-brandGreen-400 ml-2"
          icon={ICON_TYPE.LONG_ARROW_ALT_RIGHT}
        />
      </Link>
    </Token>
  </Story>
</Preview>

#### Using a native anchor

We can also use native HTML elements as children. We need to apply the same
styles from the Link example.

A button element would work the same way.

<Preview>
  <Story name="Composable example with anchor">
    <Token className="px-0 h-auto ease-all-md hover:bg-gray-400">
      <a
        className="text-gray-700 px-3 h-8 flex items-center rounded focus:outline-none focus:shadow-focus"
        rel="noopener noreferrer"
        target="_blank"
        href="/"
      >
        Available in DocuSign
        <Icon
          className="text-iconSm text-brandGreen-400 ml-2"
          icon={ICON_TYPE.LONG_ARROW_ALT_RIGHT}
        />
      </a>
    </Token>
  </Story>
</Preview>