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

<Meta title="Components/Icons/Material Icon" component={MaterialIcon} />

<ComponentHeading
  componentName="MaterialIcon"
  description="Displays a pre-determined set of Google Material Design icons"
  sourcePath="src/components/MaterialIcon/MaterialIcon.tsx"
/>

## Installation

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

## Basic usage

<Canvas>
  <Story name="Icon">
    <MaterialIcon name="delete" />
  </Story>
</Canvas>

## API

### Icon

These are all of the props for `MaterialIcon`.

<ArgsTable of={MaterialIcon} />

## Demos

### All Icons

https://fonts.google.com/icons

<Canvas>
  <Story name="All Icons">
    {() => {
      const [showBoundingBox, setShowBoundingBox] = React.useState(false);
      const [iconSize, setIconSize] = React.useState("xl");
      const [iconWeight, setIconWeight] = React.useState(400);
      const [iconFilled, setIconFilled] = React.useState(false);
      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
              style={{ display: "flex", flexDirection: "column", gap: "4px" }}
            >
              <b>Icon weight:</b>
              <div
                style={{ display: "flex", flexDirection: "column", gap: "4px" }}
              >
                <label
                  style={{ display: "flex", alignItems: "center", gap: "4px" }}
                >
                  <input
                    type="radio"
                    name="icon_weight"
                    value={400}
                    onChange={(e) => setIconWeight(Number(e.target.value))}
                    checked={iconWeight === 400}
                  />{" "}
                  400 - default
                </label>
                <label
                  style={{ display: "flex", alignItems: "center", gap: "4px" }}
                >
                  <input
                    type="radio"
                    name="icon_weight"
                    value={600}
                    onChange={(e) => setIconWeight(Number(e.target.value))}
                    checked={iconWeight === 600}
                  />{" "}
                  600
                </label>
              </div>
            </div>
            <div
              style={{ display: "flex", flexDirection: "column", gap: "4px" }}
            >
              <b>Icon filled:</b>
              <div
                style={{ display: "flex", flexDirection: "column", gap: "4px" }}
              >
                <label
                  style={{ display: "flex", alignItems: "center", gap: "4px" }}
                >
                  <input
                    type="checkbox"
                    name="icon_filled"
                    value={iconFilled}
                    onChange={() => setIconFilled(!iconFilled)}
                  />
                  Filled
                </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(MATERIAL_ICON_MAP).map((icon) => {
                return (
                  <Table.Row key={icon}>
                    <Table.Cell className="text-center">
                      <MaterialIcon
                        name={icon}
                        weight={iconWeight}
                        size={iconSize}
                        filled={iconFilled}
                        style={{
                          border: showBoundingBox ? "1px solid red" : undefined,
                        }}
                      />
                    </Table.Cell>
                    <Table.Cell style={{ height: "40px" }}>
                      <code>{icon}</code>
                    </Table.Cell>
                  </Table.Row>
                );
              })}
            </Table.Body>
          </Table>
        </div>
      );
    }}
  </Story>
</Canvas>