import React from "react";
import { Meta, StoryObj } from "@storybook/react";
import { baseTokens, lightTheme, darkTheme } from "../../theme";

const ColorSwatch = ({ name, value }: { name: string; value: string }) => (
  <div style={{ display: "flex", alignItems: "center", marginBottom: "8px" }}>
    <div
      style={{
        width: "40px",
        height: "40px",
        backgroundColor: value,
        border: "1px solid #ccc",
        marginRight: "8px",
      }}
    />
    <div>
      <code
        style={{ fontSize: "12px", fontWeight: "bold", marginRight: "8px" }}
      >
        {name}
      </code>
      <span style={{ fontSize: "12px", color: "#666" }}>{value}</span>
    </div>
  </div>
);

const RenderTokens = ({
  tokens,
  prefix = "",
}: {
  tokens: Record<string, any>;
  prefix?: string;
}) => {
  const entries = Object.entries(tokens);
  return (
    <>
      {entries.map(([key, value]) => {
        const tokenName = prefix ? `${prefix}.${key}` : key;
        if (typeof value === "string") {
          return <ColorSwatch key={tokenName} name={tokenName} value={value} />;
        } else if (typeof value === "object") {
          return (
            <RenderTokens key={tokenName} tokens={value} prefix={tokenName} />
          );
        }
        return null;
      })}
    </>
  );
};

const RenderThemeTokens = ({ tokens }: { tokens: Record<string, string> }) => (
  <>
    {Object.entries(tokens).map(([name, value]) => (
      <ColorSwatch key={name} name={name} value={value} />
    ))}
  </>
);

const meta: Meta = {
  title: "Design Tokens/Colors",
};

export default meta;

export const AllColors: StoryObj = {
  render: () => (
    <div style={{ padding: "16px", color: "#333", backgroundColor: "#fff" }}>
      <h1 style={{ fontFamily: "sans-serif", marginBottom: "16px" }}>
        Color Tokens
      </h1>
      {/* Container that holds the three sections side by side */}
      <div style={{ display: "flex", flexDirection: "row", gap: "24px" }}>
        <div>
          <h2 style={{ fontFamily: "sans-serif", margin: "24px 0 8px" }}>
            Base Tokens
          </h2>
          <RenderTokens tokens={baseTokens} />
        </div>
        <div>
          <h2 style={{ fontFamily: "sans-serif", margin: "24px 0 8px" }}>
            Light Mode
          </h2>
          <RenderThemeTokens tokens={lightTheme.tokens} />
        </div>
        <div>
          <h2 style={{ fontFamily: "sans-serif", margin: "24px 0 8px" }}>
            Dark Mode
          </h2>
          <RenderThemeTokens tokens={darkTheme.tokens} />
        </div>
      </div>
    </div>
  ),
};