/**
 * Slugify function, has to match the formula used in interactive-tutorial.js
 */
import { useEffect, useState } from 'react';

export const useThemeFromClassList = (classNames) => {
  const [currentTheme, setCurrentTheme] = useState(null);

  useEffect(() => {
    // Function to update the theme based on the class list
    const updateTheme = () => {
      for (const className of classNames) {
        if (document.documentElement.classList.contains(className)) {
          setCurrentTheme(className);
          return;
        }
      }
    };

    // Initial update
    updateTheme();

    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(() => {
      updateTheme();
    });

    // Start observing the target node for configured mutations
    observer.observe(document.documentElement, {
      attributes: true, // Listen for attribute changes
      attributeFilter: ['class'], // Specifically, listen only to "class" attribute changes
    });

    // Cleanup: Disconnect the observer
    return () => {
      observer.disconnect();
    };
  }, [classNames]);

  return currentTheme;
};

export function slugify(s) {
  const unacceptable_chars = /[^A-Za-z0-9._ ]+/g;
  const whitespace_regex = /\s+/g;
  s = s.replace(unacceptable_chars, "");
  s = s.replace(whitespace_regex, "_");
  s = s.toLowerCase();
  if (!s) {
    s = "_";
  }
  return s;
}

export function idify(s: string) {
  // like slugify, but more unicode-friendly.
  // for some reason the better version using \p gives an "s12 is undefined" TypeError sometimes,
  // so it's disabled for now. With that fixed, we could use localized step names in interactive tutorials.
  //s = s.replace(/[^\p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Connector_Punctuation}\p{Join_Control}]/gu, '').trim().toLowerCase()
  //s = s.replace(/[^\w\s-]/gu, '').trim().toLowerCase()
  s = s.replace(/([^\w]|[\s-])/gu, '').trim().toLowerCase() 
  s = s.replace(/[\s-]+/gu, '-')
  if (!s) {
    s = "_";
  }
  return s
}