import {
  Meta,
  Preview,
  Props,
  Story,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { Reference } from "./Reference";
import { ICON_TYPE } from "../Icon";
import { STATUS_VARIANT } from "../../types";
import { Table } from "../Table";

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

# Reference

`Reference` is used within a [`Table`](http://localhost:9002/?path=/docs/components-table--table) cell to indicate a link of the record represented by the table row to another item.

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

<Preview withSource={SourceState.OPEN}>
  <Story name="Reference">
    <Reference>Reference</Reference>
  </Story>
</Preview>

## Custom Props

<Props of={Reference} />

## Demos

### With Icon

<Preview>
  <Story name="Additional content">
    <Reference href="http://google.com" icon={ICON_TYPE.POO_STORM}>
      Reference
    </Reference>
  </Story>
</Preview>

### With Status Badge

<Preview>
  <Story name="Status Badge Default">
    <Reference
      href="http://google.com"
      icon={ICON_TYPE.POO_STORM}
      badgeLabel="Default"
    >
      Reference
    </Reference>
  </Story>
  <Story name="Status Badge Warning">
    <Reference
      href="http://google.com"
      icon={ICON_TYPE.POO_STORM}
      badgeVariant={STATUS_VARIANT.WARNING}
      badgeLabel="Warning"
    >
      Reference
    </Reference>
  </Story>
  <Story name="Status Badge Success">
    <Reference
      href="http://google.com"
      icon={ICON_TYPE.POO_STORM}
      badgeVariant={STATUS_VARIANT.SUCCESS}
      badgeLabel="Success"
    >
      Reference
    </Reference>
  </Story>
  <Story name="Status Badge Danger">
    <Reference
      href="http://google.com"
      icon={ICON_TYPE.POO_STORM}
      badgeVariant={STATUS_VARIANT.DANGER}
      badgeLabel="Danger"
    >
      Reference
    </Reference>
  </Story>
</Preview>

### As Router Link

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

<Preview>
  <Story name="As router link">
    <Reference as={RouterLink} to="http://google.com">
      Reference
    </Reference>
  </Story>
</Preview>

### Disabled

<Preview>
  <Story name="Disabled">
    <Reference as={RouterLink} to="http://google.com" disabled>
      Reference
    </Reference>
  </Story>
  <Story name="Disabled Status Badge Default">
    <Reference
      disabled
      href="http://google.com"
      icon={ICON_TYPE.POO_STORM}
      badgeLabel="Default"
    >
      Reference
    </Reference>
  </Story>
  <Story name="Disabled Status Badge Warning">
    <Reference
      disabled
      href="http://google.com"
      icon={ICON_TYPE.POO_STORM}
      badgeVariant={STATUS_VARIANT.WARNING}
      badgeLabel="Warning"
    >
      Reference
    </Reference>
  </Story>
  <Story name="Disabled Status Badge Success">
    <Reference
      disabled
      href="http://google.com"
      icon={ICON_TYPE.POO_STORM}
      badgeVariant={STATUS_VARIANT.SUCCESS}
      badgeLabel="Success"
    >
      Reference
    </Reference>
  </Story>
  <Story name="Disabled Status Badge Danger">
    <Reference
      disabled
      href="http://google.com"
      icon={ICON_TYPE.POO_STORM}
      badgeVariant={STATUS_VARIANT.DANGER}
      badgeLabel="Danger"
    >
      Reference
    </Reference>
  </Story>
</Preview>

### In table cell

<Preview>
  <Story name="In table">
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.HeaderCell />
          <Table.HeaderCell />
          <Table.HeaderCell />
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell />
          <Table.Cell>
            <Reference href="http://google.com">Reference</Reference>
          </Table.Cell>
          <Table.Cell />
        </Table.Row>
      </Table.Body>
    </Table>
  </Story>
</Preview>

### Reference Group

<Preview>
  <Story name="Reference Group">
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.HeaderCell />
          <Table.HeaderCell />
          <Table.HeaderCell />
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell />
          <Table.Cell>
            <Reference.Group>
              <Reference href="http://google.com">Reference</Reference>
              <Reference href="http://google.com">Reference</Reference>
              <Reference href="http://google.com">Reference</Reference>
            </Reference.Group>
          </Table.Cell>
          <Table.Cell />
        </Table.Row>
      </Table.Body>
    </Table>
  </Story>
</Preview>

### Open in a new window

<Preview>
  <Story name="Open in a new window">
    <Reference href="http://google.com" target="_blank">
      Google
    </Reference>
  </Story>
</Preview>

### Not interactive

<Preview>
  <Story name="not interactive">
    <Reference as="span" noLink>
      No hover state on me
    </Reference>
  </Story>
</Preview>