import { Story, Canvas, ArgsTable, Meta } from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Table } from "../Table";
import { BrandIcon, BRAND_ICON_MAP } from "./BrandIcon";

<Meta title="Components/Icons/Brand Icon" component={BrandIcon} />

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

## Installation

```jsx
import { BrandIcon } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas>
  <Story name="Icon">
    <BrandIcon name="conveyor" />
  </Story>
</Canvas>

## API

### Icon

These are all of the props for `BrandIcon`.

<ArgsTable of={BrandIcon} />

## Demos

### All Icons

<Canvas>
  <Story name="All Icons">
    {() => {
      const [showBoundingBox, setShowBoundingBox] = React.useState(false);
      const [iconSize, setIconSize] = React.useState("xl");
      return (
        <div>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              padding: "8px",
              gap: "16px",
            }}
          >
            <div
              style={{ display: "flex", flexDirection: "column", gap: "4px" }}
            >
              <b>Icon size:</b>
              <div
                style={{ display: "flex", flexDirection: "column", gap: "4px" }}
              >
                <label
                  style={{ display: "flex", alignItems: "center", gap: "4px" }}
                >
                  <input
                    type="radio"
                    name="icon_size"
                    value="sm"
                    onChange={(e) => setIconSize(e.target.value)}
                    checked={iconSize === "sm"}
                  />{" "}
                  sm (12px)
                </label>
                <label
                  style={{ display: "flex", alignItems: "center", gap: "4px" }}
                >
                  <input
                    type="radio"
                    name="icon_size"
                    value="md"
                    onChange={(e) => setIconSize(e.target.value)}
                    checked={iconSize === "md"}
                  />{" "}
                  md (16px) - default
                </label>
                <label
                  style={{ display: "flex", alignItems: "center", gap: "4px" }}
                >
                  <input
                    type="radio"
                    name="icon_size"
                    value="lg"
                    onChange={(e) => setIconSize(e.target.value)}
                    checked={iconSize === "lg"}
                  />{" "}
                  lg (20px)
                </label>
                <label
                  style={{ display: "flex", alignItems: "center", gap: "4px" }}
                >
                  <input
                    type="radio"
                    name="icon_size"
                    value="xl"
                    onChange={(e) => setIconSize(e.target.value)}
                    checked={iconSize === "xl"}
                  />{" "}
                  xl (24px)
                </label>
              </div>
            </div>
            <div>
              <label
                style={{ display: "flex", alignItems: "center", gap: "4px" }}
              >
                <input
                  type="checkbox"
                  name="show_bounding_box"
                  value={showBoundingBox}
                  onChange={() => setShowBoundingBox(!showBoundingBox)}
                />
                Show icon bounding box
              </label>
            </div>
          </div>
          <Table shrinkFirstColumnPadding>
            <Table.Head>
              <Table.Row>
                <Table.HeaderCell
                  sortable={false}
                  columnWidth="90px"
                  className="text-center"
                >
                  Icon
                </Table.HeaderCell>
                <Table.HeaderCell sortable={false}>Icon Name</Table.HeaderCell>
              </Table.Row>
            </Table.Head>
            <Table.Body>
              {Object.keys(BRAND_ICON_MAP).map((icon) => {
                return (
                  <Table.Row key={icon}>
                    <Table.Cell className="text-center">
                      <BrandIcon
                        name={icon}
                        size={iconSize}
                        style={{
                          border: showBoundingBox ? "1px solid red" : undefined,
                        }}
                      />
                    </Table.Cell>
                    <Table.Cell>
                      <code>{icon}</code>
                    </Table.Cell>
                  </Table.Row>
                );
              })}
            </Table.Body>
          </Table>
        </div>
      );
    }}
  </Story>
</Canvas>