import-svg.ts

/**
 * Loads icons from @ebay/skin and generates individual React icon components
 */

import * as fs from "fs";
import * as path from "path";
import { createRequire } from "module";
import { fileURLToPath } from "url";
import { parseSync, stringify } from "svgson";
import { deleteSync } from "del";

const require = createRequire(import.meta.url);

const skinDir = path.dirname(require.resolve("@ebay/skin/package.json"));
const svgDir = path.join(skinDir, "dist/svg");

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const fileHeader = `// AUTO-GENERATED by \`importSVG\` script (\`scripts/import-svg.ts\`)`;

function parseSVG(skinIconsFile: string): any[] {
  const icons = fs.readFileSync(skinIconsFile).toString();
  return (
    ((icons && parseSync(icons, { camelcase: false })) || {}).children || []
  );
}

function parseSVGSymbols(skinIconsFile: string): any[] {
  const icons = parseSVG(skinIconsFile);
  return icons.filter(({ name }) => name === "symbol");
}

function camelCased(str: string): string {
  return str
    .replace(/^icon-/, "")
    .replace(/-(\d+)/g, (_, num) => num)
    .replace(/-([a-z])/g, (_, char) => char.toUpperCase());
}

function saveIconComponents(svgFile: string): void {
  const svgSymbols = parseSVG(svgFile);
  const symbolsData = svgSymbols
    .filter(({ name }) => name === "symbol")
    .map((symbol) => ({
      id: symbol.attributes.id.replace(/^icon-/, ""),
      content: stringify(symbol),
      type: "icon",
    }));

  // Clean up old icons
  const iconsDir = path.resolve(__dirname, "../src/evo-icon/icons");
  if (fs.existsSync(iconsDir)) {
    deleteSync([`${iconsDir}/*`]);
  } else {
    fs.mkdirSync(iconsDir, { recursive: true });
  }

  // Create types file for icon components
  fs.writeFileSync(
    path.resolve(__dirname, "../src/evo-icon/icons/types.ts"),
    `${fileHeader}\n
import type { ComponentProps } from 'react';
import type { EvoIcon } from '../icon';

export type EvoIconComponentProps = Omit<ComponentProps<typeof EvoIcon>, 'name' | '__symbol'>;
export type EvoIconComponent = (props: EvoIconComponentProps) => React.JSX.Element;
`,
  );

  const icons: Array<{ componentName: string; filePath: string }> = [];

  symbolsData.forEach((data) => {
    const iconNameCamelCase = camelCased(data.id);
    const filename = path.resolve(
      __dirname,
      `../src/evo-icon/icons/evo-icon-${data.id}.tsx`,
    );
    const iconComponentName = `EvoIcon${iconNameCamelCase[0].toUpperCase()}${iconNameCamelCase.slice(1)}`;
    icons.push({
      componentName: iconComponentName,
      filePath: `evo-icon-${data.id}`,
    });

    const content = `${fileHeader}\n
import { EvoIcon } from "../icon";
import type { EvoIconComponent } from "./types";

const SYMBOL = \`${data.content}\`;

export const ${iconComponentName}: EvoIconComponent = props => (
    <EvoIcon {...props} name="${iconNameCamelCase}" __symbol={SYMBOL} />
);
`;

    fs.writeFileSync(filename, content);
  });

  console.log(`Created ${icons.length} icon components.`);

  // Create Storybook stories file
  const storiesFile = path.resolve(__dirname, "../src/evo-icon/icon.stories.tsx");

  const storiesContent = `${fileHeader}\n
import type { Meta } from "@storybook/react-vite";
import { EvoIconProvider } from "./context";
${icons.map(({ componentName, filePath }) => `import { ${componentName} } from "./icons/${filePath}";`).join("\n")}

const meta: Meta = {
  title: "Graphics & Icons/EvoIcon",
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component: \`
Icon components from the eBay Skin icon set. Each icon is available as an individual component for optimal tree-shaking.

## Usage

\\\`\\\`\\\`tsx
import { EvoIconProvider } from "@evo-web/react";
import { EvoIconCart16 } from "@evo-web/react/evo-icon-cart-16";

function App() {
  return (
    <EvoIconProvider>
      <EvoIconCart16 a11yText="Shopping cart" />
    </EvoIconProvider>
  );
}
\\\`\\\`\\\`

## Icons

Icons are imported individually via subpath exports:
- \\\`@evo-web/react/evo-icon-<name>\\\` - Import specific icon component
- Wrap your app with \\\`<EvoIconProvider>\\\` for better SSR performance
- Use \\\`a11yText\\\` prop for accessible labels
- Use \\\`a11yVariant="label"\\\` to use aria-label instead of title element

## Available Icons

Over 1,000 icons available in multiple sizes (12, 16, 20, 24, 32, 48, 64).
        \`,
      },
    },
  },
};

export default meta;

export const AllIcons = () => (
  <EvoIconProvider>
    <table>
      <tbody>
        ${icons
          .map(
            ({ componentName, filePath }) => `
        <tr>
          <td>{${componentName}.name || "${filePath}"}</td>
          <td>
            <${componentName} />
          </td>
        </tr>
            `,
          )
          .join("\n")}
      </tbody>
    </table>
  </EvoIconProvider>
);
`;

  fs.writeFileSync(storiesFile, storiesContent);
  console.log(`Created Storybook stories at ${storiesFile}`);
}

// Main execution
const skinIconsFile = path.join(svgDir, "icons.svg");
const skinSVGSymbols = parseSVGSymbols(skinIconsFile);
console.log(`Found ${skinSVGSymbols.length} icons in Skin.`);

// Generate individual icon components
saveIconComponents(skinIconsFile);

console.log("✅ Icon generation complete!");