import { Meta } from "@storybook/blocks";
import { tokens } from "../style-dictionary/dist/tokens";
import {
  TableFull,
  Row,
  Cell,
  Swatch,
  ClickToCopy,
  categories,
  titleize,
} from "./_story";

<Meta title="Documentation/Tokens" />

# Tokens

These tokens are normally used in JavaScript. In almost all cases, you’ll
want to use the Tailwind CSS utility classnames instead.

## Usage

```js
import { tokens } from "@conveyorhq/design-tokens";
```

<ul
  style={{
    listStyle: "none",
    padding: 0,
  }}
>
  {categories.map((category) => (
    <li key={category}>
      <a href={`#${category}`}>
        {titleize(category)}
        {category === "leading" && " (line height)"}
        {category === "screenWidth" && " (breakpoints)"}
        {category === "tracking" && " (letter spacing)"}
        {category === "type" && " (font family)"}
      </a>
    </li>
  ))}
</ul>

<div>
  <br />
  <br />
  {categories.map((category) => (
    <div key={category} id={category}>
      <h2>
        {titleize(category)}
        {category === "leading" && " (line height)"}
        {category === "screenWidth" && " (breakpoints)"}
        {category === "tracking" && " (letter spacing)"}
        {category === "type" && " (font family)"}
      </h2>
      <p>
        {category === "color" ? (
          <>
            <code>tokens.{category}[key]</code> or{" "}
            <code>tokens.{category}[key][key]</code>
          </>
        ) : (
          <code>tokens.{category}[key]</code>
        )}
      </p>
      {category === "fontWeight" && (
        <p>Weight can only be applied to Neue Montreal.</p>
      )}
      <TableFull columns={["Key", "Value", ""]}>
        {Object.keys(tokens[category]).map((key) => (
          <Row key={key}>
            <Cell>
              <code>{key}</code>
            </Cell>
            <Cell
              colSpan={typeof tokens[category][key] === "object" ? 2 : null}
            >
              {typeof tokens[category][key] === "object" ? (
                <TableFull>
                  {Object.keys(tokens[category][key]).map((k, i) => (
                    <Row
                      key={k}
                      style={
                        i === Object.keys(tokens[category][key]).length - 1
                          ? {
                              borderBottom: 0,
                            }
                          : {}
                      }
                    >
                      <Cell style={{ width: "50%" }}>
                        <code>{k}</code>
                      </Cell>
                      <Cell style={{ width: "50%" }}>
                        <div style={{ display: "flex", gap: "4px" }}>
                          <code>{tokens[category][key][k]}</code>
                          {category === "color" && (
                            <Swatch color={tokens[category][key][k]} />
                          )}
                        </div>
                      </Cell>
                      <Cell style={{ width: "auto" }}>
                        {typeof tokens[category][key][k] !== "object" && (
                          <>
                            {isNaN(parseInt(k, 10)) ? (
                              <ClickToCopy
                                text={`tokens.${category}.${key}.${k}`}
                              />
                            ) : (
                              <ClickToCopy
                                text={`tokens.${category}.${key}[${k}]`}
                              />
                            )}
                          </>
                        )}
                      </Cell>
                    </Row>
                  ))}
                </TableFull>
              ) : (
                <div style={{ display: "flex", gap: "4px" }}>
                  {category === "type" ? (
                    <code>
                      <pre style={{ fontSize: "inherit" }}>
                        {tokens[category][key].replaceAll(", ", ",\n")}
                      </pre>
                    </code>
                  ) : (
                    <code>{tokens[category][key]}</code>
                  )}
                  {category === "color" && (
                    <Swatch color={tokens[category][key]} />
                  )}
                </div>
              )}
            </Cell>
            {typeof tokens[category][key] !== "object" && (
              <Cell style={{ textAlign: "right" }}>
                {isNaN(parseInt(key, 10)) ? (
                  <ClickToCopy text={`tokens.${category}.${key}`} />
                ) : (
                  <ClickToCopy text={`tokens.${category}[${key}]`} />
                )}
              </Cell>
            )}
          </Row>
        ))}
      </TableFull>
      <br />
      <br />
    </div>
  ))}
</div>