import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
import { capitalize } from "../../utilities/strings";
import Examples from "../../storybook-components/Examples";
import { EnumTable } from "../../storybook-components/EnumTable";
import { STATUS_VARIANT } from "../../types";
import { Box } from "../Box";
import { ICON_TYPE } from "../Icon";
import { StatusLabel, STATUS_LABEL_ICON_POSITION } from "./StatusLabel";

export const variants = Object.values(STATUS_VARIANT);
export const defaultText = capitalize(STATUS_VARIANT.DEFAULT);
export const dangerText = capitalize(STATUS_VARIANT.DANGER);
export const warningText = capitalize(STATUS_VARIANT.WARNING);
export const successText = capitalize(STATUS_VARIANT.SUCCESS);

<Meta title="Components/Data/Status Label" component={StatusLabel} />

# Status label

Status label shows text using a status variant with or without an icon.
By default, a "stoplight" icon is rendered, but a custom icon can be
rendered instead. It is used to display successes, warnings and errors,
but should not be used for long-form messages. For those, use
[banner](/?path=/docs/components-banner--default).

[See examples](#demos)

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

<Preview>
  <Story name="Default">
    <StatusLabel variant={STATUS_VARIANT.DEFAULT}>{defaultText}</StatusLabel>
  </Story>
</Preview>

## Props

These are the custom props that extend `BoxProps`. Full list of props <a href="#all-props">below</a>.

<Props of={StatusLabel} />
<EnumTable enums={{ ICON_TYPE, STATUS_LABEL_ICON_POSITION, STATUS_VARIANT }} />

## Demos

### Variants

<Preview>
  <Story name="Variant">
    <Examples>
      <StatusLabel variant={STATUS_VARIANT.DEFAULT}>{defaultText}</StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.DANGER}>{dangerText}</StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.WARNING}>{warningText}</StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.SUCCESS}>{successText}</StatusLabel>
    </Examples>
  </Story>
</Preview>

### Color label

<Preview>
  <Story name="Color label">
    <Examples>
      <StatusLabel variant={STATUS_VARIANT.DEFAULT} colorLabel>
        {defaultText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.DANGER} colorLabel>
        {dangerText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.WARNING} colorLabel>
        {warningText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.SUCCESS} colorLabel>
        {successText}
      </StatusLabel>
    </Examples>
  </Story>
</Preview>

### Custom icon

<Preview>
  <Story name="Custom icon">
    <Examples>
      <StatusLabel variant={STATUS_VARIANT.DEFAULT} icon={ICON_TYPE.TAG}>
        {defaultText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.DANGER} icon={ICON_TYPE.TAG}>
        {dangerText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.WARNING} icon={ICON_TYPE.TAG}>
        {warningText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.SUCCESS} icon={ICON_TYPE.TAG}>
        {successText}
      </StatusLabel>
    </Examples>
  </Story>
</Preview>

### Icon position, left

Left is the default position.

<Preview>
  <Story name="Icon position, left">
    <Examples>
      <StatusLabel
        variant={STATUS_VARIANT.DEFAULT}
        iconPosition={STATUS_LABEL_ICON_POSITION.LEFT}
      >
        {defaultText}
      </StatusLabel>
      <StatusLabel
        variant={STATUS_VARIANT.DANGER}
        iconPosition={STATUS_LABEL_ICON_POSITION.LEFT}
      >
        {dangerText}
      </StatusLabel>
      <StatusLabel
        variant={STATUS_VARIANT.WARNING}
        iconPosition={STATUS_LABEL_ICON_POSITION.LEFT}
      >
        {warningText}
      </StatusLabel>
      <StatusLabel
        variant={STATUS_VARIANT.SUCCESS}
        iconPosition={STATUS_LABEL_ICON_POSITION.LEFT}
      >
        {successText}
      </StatusLabel>
    </Examples>
  </Story>
</Preview>

### Icon position, right

<Preview>
  <Story name="Icon position, right">
    <Examples>
      <StatusLabel
        variant={STATUS_VARIANT.DEFAULT}
        iconPosition={STATUS_LABEL_ICON_POSITION.RIGHT}
      >
        {defaultText}
      </StatusLabel>
      <StatusLabel
        variant={STATUS_VARIANT.DANGER}
        iconPosition={STATUS_LABEL_ICON_POSITION.RIGHT}
      >
        {dangerText}
      </StatusLabel>
      <StatusLabel
        variant={STATUS_VARIANT.WARNING}
        iconPosition={STATUS_LABEL_ICON_POSITION.RIGHT}
      >
        {warningText}
      </StatusLabel>
      <StatusLabel
        variant={STATUS_VARIANT.SUCCESS}
        iconPosition={STATUS_LABEL_ICON_POSITION.RIGHT}
      >
        {successText}
      </StatusLabel>
    </Examples>
  </Story>
</Preview>

### Bold text

<Preview>
  <Story name="Bold text">
    <Examples>
      <StatusLabel variant={STATUS_VARIANT.DEFAULT} className="font-medium">
        {defaultText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.DANGER} className="font-medium">
        {dangerText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.WARNING} className="font-medium">
        {warningText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.SUCCESS} className="font-medium">
        {successText}
      </StatusLabel>
    </Examples>
  </Story>
</Preview>

### Font size

Status label size can be changed by manipulating the parent font size.

<Preview>
  <Story name="Font size">
    <Examples>
      <Box as="span" className="text-h6">
        <StatusLabel variant={STATUS_VARIANT.DEFAULT}>
          {defaultText}
        </StatusLabel>
      </Box>
      <Box as="span" className="text-h6">
        <StatusLabel variant={STATUS_VARIANT.DANGER}>{defaultText}</StatusLabel>
      </Box>
      <Box as="span" className="text-h6">
        <StatusLabel variant={STATUS_VARIANT.WARNING}>
          {defaultText}
        </StatusLabel>
      </Box>
      <Box as="span" className="text-h6">
        <StatusLabel variant={STATUS_VARIANT.SUCCESS}>
          {defaultText}
        </StatusLabel>
      </Box>
      <br />
      <Box as="span" className="text-h1">
        <StatusLabel variant={STATUS_VARIANT.DEFAULT}>
          {defaultText}
        </StatusLabel>
      </Box>
      <Box as="span" className="text-h1">
        <StatusLabel variant={STATUS_VARIANT.DANGER}>{defaultText}</StatusLabel>
      </Box>
      <Box as="span" className="text-h1">
        <StatusLabel variant={STATUS_VARIANT.WARNING}>
          {defaultText}
        </StatusLabel>
      </Box>
      <Box as="span" className="text-h1">
        <StatusLabel variant={STATUS_VARIANT.SUCCESS}>
          {defaultText}
        </StatusLabel>
      </Box>
    </Examples>
  </Story>
</Preview>

### Icon size

Default iconFontSize is 60% of parent font size. Font size can be
defined as a percentage or pixel value.

<Preview>
  <Story name="Icon size">
    <Examples>
      <StatusLabel variant={STATUS_VARIANT.DEFAULT} iconFontSize="0.5em">
        {defaultText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.DANGER} iconFontSize="0.5em">
        {dangerText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.WARNING} iconFontSize="0.5em">
        {warningText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.SUCCESS} iconFontSize="0.5em">
        {successText}
      </StatusLabel>
      <br />
      <StatusLabel variant={STATUS_VARIANT.DEFAULT} iconFontSize="16px">
        {defaultText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.DANGER} iconFontSize="16px">
        {dangerText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.WARNING} iconFontSize="16px">
        {warningText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.SUCCESS} iconFontSize="16px">
        {successText}
      </StatusLabel>
      <br />
      <StatusLabel variant={STATUS_VARIANT.DEFAULT} iconFontSize="200%">
        {defaultText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.DANGER} iconFontSize="200%">
        {dangerText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.WARNING} iconFontSize="200%">
        {warningText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.SUCCESS} iconFontSize="200%">
        {successText}
      </StatusLabel>
    </Examples>
  </Story>
</Preview>

### Remove icon

If `removeIcon` is set to true, `colorLabel` should also be true.

<Preview>
  <Story name="Remove icon">
    <Examples>
      <StatusLabel variant={STATUS_VARIANT.DEFAULT} removeIcon colorLabel>
        {defaultText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.DANGER} removeIcon colorLabel>
        {dangerText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.WARNING} removeIcon colorLabel>
        {warningText}
      </StatusLabel>
      <StatusLabel variant={STATUS_VARIANT.SUCCESS} removeIcon colorLabel>
        {successText}
      </StatusLabel>
    </Examples>
  </Story>
</Preview>

## All Props

Any valid attribute of `BoxProps` is available to the status label component.

<Props of={StatusLabel} />