import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
import {
  Icon,
  StatusIcon,
  ICON_TYPE,
  ICON_STYLE_PREFIX,
  CUSTOM_ICON_TYPE,
} from "./Icon";
import { Box } from "../Box";
import { Flex } from "../Flex";
import { Table } from "../Table";
import { STATUS_VARIANT } from "../../types";
import { EnumTable } from "../../storybook-components/EnumTable";
import { StatusContext } from "../../contexts/status";

<Meta title="Components/Images/Icon" component={Icon} />

# Icon

`Icon` is a simple component that displays a pre-determined set of icons (defined in `ICON_TYPE`) selected from the [Font Awesome Library](https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use). `StatusIcon` is a subset of those icons for use in places where system status is being communicated (error, warning, success, or default).

[See examples](#demos)

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

export const icons = Object.values(ICON_TYPE);
export const customIcons = Object.values(CUSTOM_ICON_TYPE);
export const iconPrefixes = Object.values(ICON_STYLE_PREFIX);
export const variants = Object.values(STATUS_VARIANT);

<Preview>
  <Story name="Icon">
    <Icon icon={ICON_TYPE.CHECK} />
  </Story>
</Preview>

## Props

### Icon

These are all of the props for `Icon`.

<Props of={Icon} />

### StatusIcon

These are all of the props for `StatusIcon`.

<Props of={StatusIcon} />
<EnumTable
  enums={{ ICON_TYPE, CUSTOM_ICON_TYPE, ICON_STYLE_PREFIX, STATUS_VARIANT }}
/>

## Demos

### All Icons Table

Font Awesome provides different [styles](https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use) for each of its icons. Only a subset of those combinations are provided. Consult the table below to see which styles are available.

<Preview>
  <Story name="All Icons">
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.HeaderCell sortable={false}>Icon Name</Table.HeaderCell>
          <Table.HeaderCell sortable={false} columnWidth="90px">
            Default
          </Table.HeaderCell>
          <Table.HeaderCell sortable={false} columnWidth="90px">
            Solid
          </Table.HeaderCell>
          <Table.HeaderCell sortable={false} columnWidth="90px">
            Regular
          </Table.HeaderCell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        {icons.map((icon) => (
          <Table.Row key={icon}>
            <Table.Cell>
              <code>{icon}</code>
            </Table.Cell>
            <Table.Cell className="text-center">
              <Icon icon={icon} />
            </Table.Cell>
            {iconPrefixes.map((prefix) => (
              <Table.Cell key={prefix} className="text-center">
                <Icon icon={icon} prefix={prefix} />
              </Table.Cell>
            ))}
          </Table.Row>
        ))}
        <Table.Row>
          <Table.HeaderCell sortable={false}>Custom Icon Name</Table.HeaderCell>
          <Table.HeaderCell
            sortable={false}
            columnWidth="90px"
            colSpan={3}
            className="text-center"
          >
            Icon
          </Table.HeaderCell>
        </Table.Row>
        {customIcons.map((icon) => (
          <Table.Row key={icon}>
            <Table.Cell>
              <code>{icon}</code>
            </Table.Cell>
            <Table.Cell className="text-left" colSpan={3}>
              <Icon icon={icon} />
            </Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  </Story>
</Preview>

### All Status Icons

<Preview>
  <Story name="All Status Icons">
    {() =>
      variants.map((status) => (
        <Flex key={status} className="mb-1">
          <StatusIcon status={status} />
          <Box className="pl-4 text-gray-700">
            <code>{status}</code>
          </Box>
        </Flex>
      ))
    }
  </Story>
</Preview>

### Status Icons Using Context

If `StatusIcon` is used inside a `StatusContext`, it will automatically use the status set there.

<Preview>
  <Story name="Status Icon Context">
    {() =>
      variants.map((status) => (
        <StatusContext.Provider
          value={STATUS_VARIANT[status.toUpperCase()]}
          key={status}
        >
          <StatusIcon />
        </StatusContext.Provider>
      ))
    }
  </Story>
</Preview>

### Custom Icon

The `CUSTOM_ICON_TYPE` enum includes icons that aren't included in Font Awesome. The `spin`, `prefix`, and `flip` props do not work with these.

<Preview>
  <Story name="Custom Icon">
    <Icon icon={CUSTOM_ICON_TYPE.SPARKLE} color="gold-400 text-h1" />
  </Story>
</Preview>