/**
 * Replaces specified HTML tags in the given content with custom tags.
 *
 * @param {string} content - The content in which to replace the tags.
 * @param {string} tag - The HTML tag to be replaced (e.g., 'strong', 'em').
 * @param {string} replacement - The class name to be applied to the <span> element that replaces the tag.
 * @returns {string} - The content with the specified tags replaced by <span> elements with the given class name.
 *
 * @example
 * // Replaces <strong> tags with <span className="font-bold"> tags
 * const result = replaceTags('<strong>Hello</strong>', 'strong', 'font-bold');
 * // result: '<span className="font-bold">Hello</span>'
 */
export const replaceTags = (content: string, tag: string, replacement: string) => {
  const tagRegex = new RegExp(`<${tag}>(.*?)</${tag}>`, 'g');
  return content.replace(tagRegex, (_match, text) => {
    return `<span className="${replacement}">${text}</span>`;
  });
};

/**
 * Replaces <a> tags in the content with custom <span> and <a> tags.
 *
 * @param {string} content - The content containing <a> tags to be replaced.
 * @returns {string} - The content with <a> tags replaced by custom tags.
 *
 * @example
 * const result = replaceLinks('<a href="example.com" target="_blank">Example</a>');
 * // result: '<span className="font-bold text-navy underline underline-offset-2 decoration-2"><a href="example.com">Example</a></span>'
 */
export const replaceLinks = (content: string) => {
  return content
    .replace(/target="_blank"/g, '')
    .replace(/rel=".*?"/g, '')
    .replace(/<\/?[^>]*a>/g, '</a></span>')
    .replace(
      /<a/g,
      '<span className="font-bold text-navy underline underline-offset-2 decoration-2"><a', // TODO: Replace with Link component
    );
};

/**
 * Replaces <dl> tags with <ul> tags and <dt>/<dd> tags with list items.
 *
 * @param {string} content - The content containing <dl>, <dt>, and <dd> tags.
 * @returns {string} - The content with <dl>, <dt>, and <dd> tags replaced by <ul> and <li> tags.
 *
 * @example
 * const result = replaceDlTags('<dl><dt>Term</dt><dd>Definition</dd></dl>');
 * // result: '<ul className="mt-3 mb-6"><li className="font-semibold ml-6">Term</li><li className="ml-12">Definition</li></ul>'
 */
export const replaceDlTags = (content: string) => {
  return content
    .replace(/<\/?dl>/g, (match) => (match === '<dl>' ? '<ul className="mt-3 mb-6">' : '</ul>'))
    .replace(/<dt>/g, '<li className="font-semibold ml-6">')
    .replace(/<\/dt>/g, '</li>')
    .replace(/<dd>/g, '<li className="ml-12">')
    .replace(/<\/dd>/g, '</li>');
};

/**
 * Recursively retrieves list content with a depth limit.
 *
 * @param {any[]} blocks - The list of blocks to process.
 * @param {number} [depth=0] - The current depth of recursion.
 * @returns {any[]} - The list content with depth information.
 * @throws {Error} - If the maximum recursion depth is exceeded.
 *
 * @example
 * const result = getListContent(blocks);
 * // result: [[0, 'content1'], [1, 'content2'], ...]
 */
export const getListContent = (blocks: any[], depth = 0) => {
  if (depth > 24) {
    throw new Error('Maximum recursion depth exceeded');
  }
  return blocks.reduce((content, block) => {
    if (block.attributes?.content) {
      content.push([depth, block.attributes.content]);
    }
    if (block.innerBlocks?.length) {
      content = content.concat(getListContent(block.innerBlocks, depth + 1));
    }
    return content;
  }, []);
};

/**
 * Applies text decoration based on the given decoration type.
 *
 * @param {string} decoration - The type of text decoration (e.g., 'underline').
 * @returns {string} - The corresponding CSS classes for the text decoration.
 *
 * @example
 * const result = applyTextDecoration('underline');
 * // result: 'underline underline-offset-2'
 */
export const applyTextDecoration = (decoration: string) => {
  return decoration === 'underline' ? 'underline underline-offset-2' : '';
};