import { Story, Canvas, ArgsTable, Meta } from "@storybook/blocks";
import {
  ComponentHeading,
  ComponentStatus,
  COMPONENT_STATUS,
  EnumTable,
} from "../../storybook-components";
import { StatusContext } from "../../contexts/status";
import { STATUS_VARIANT } from "../../types";
import { Box } from "../Box";
import { Flex } from "../Flex";
import { Table } from "../Table";
import {
  Icon,
  StatusIcon,
  ICON_TYPE,
  ICON_STYLE_PREFIX,
  CUSTOM_ICON_TYPE,
} from "./Icon";

<Meta title="Components/Icons/Icon (Deprecated)" component={Icon} />

<ComponentHeading
  componentName="Icon"
  description="Displays a pre-determined set of Font Awesome icons"
  sourcePath="src/components/Icon/Icon.tsx"
/>

<br />

<ComponentStatus status={COMPONENT_STATUS.DEPRECATED}>
  Please use `MaterialIcon` instead. For brand icons, use `BrandIcon`.
</ComponentStatus>

`StatusIcon` is a subset of icons for use in places where system status is being
communicated (error, warning, success, or default).

## Installation

```jsx
import { Icon } from "@conveyorhq/arrow-ds";
import { StatusIcon } from "@conveyorhq/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);

## Basic usage

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

## API

### Icon

These are all of the props for `Icon`.

<ArgsTable of={Icon} />

### StatusIcon

These are all of the props for `StatusIcon`.

<ArgsTable 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.

<Canvas>
  <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>
</Canvas>

### All Status Icons

<Canvas>
  <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>
</Canvas>

### Status Icons Using Context

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

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

### 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.

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