import { useEffect, useState } from "react";

// Utility function to generate a unique hash for the CSS scope
function generateUniqueHash() {
  return Math.random().toString(36).substr(2, 8);
}

// Custom Hook for creating CSS scope using a custom attribute
export const useCreateCssScope = (cssFilePath: string) => {
  const [scopeHash, setScopeHash] = useState<string>("");

  useEffect(() => {
    const hash = generateUniqueHash();
    setScopeHash(hash);

    // Log the CSS file path and scope hash for debugging
    console.log(`Loading CSS from: ${cssFilePath}`);
    console.log(`Generated scope hash: ${hash}`);

    // Fetch CSS content and scope it using the custom attribute
    fetch(`${import.meta.env.BASE_URL}styles/${cssFilePath}`)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`Failed to load CSS file: ${cssFilePath}`);
        }
        return response.text();
      })
      .then((cssText) => {
        // Create a <style> tag and append the scoped CSS
        const styleElement = document.createElement("style");
        const scopedCss = scopeCssWithAttribute(cssText, hash);
        console.log(`Scoped CSS: \n${scopedCss}`); // Log the scoped CSS

        styleElement.textContent = scopedCss;
        document.head.appendChild(styleElement);
      })
      .catch((error) => console.error("Failed to load CSS file:", error));
  }, [cssFilePath]);

  // Return the generated hash attribute object
  return { [`data-jsx-${scopeHash}`]: "" };
};

// Utility function to scope the CSS using a custom attribute
const scopeCssWithAttribute = (cssText: string, scopeHash: string) => {
  // Modify the CSS to include the custom attribute selector with the scope hash
  const attributeSelector = `data-jsx-${scopeHash}`;
  return cssText.replace(
    /\.([a-zA-Z0-9_-]+)\s*{/g,
    `.$1[${attributeSelector}] {`
  );
};

import { useCreateCssScope } from "./hooks/useCreateCssScope"

function App() {
  const css = useCreateCssScope("Root.css");
  const css2 = useCreateCssScope("Text.css");

  return (
    <>
      <div {...css} className={"visual__layout"}>
        <div {...css} className={"visual__header"}>
          <div {...css2} className="heading">hi</div>
        </div>
      </div>
    </>
  )
}

export default App

<div data-jsx-="" class="container"></div>

<div data-jsx-hash class="container"></div>