// 获取唯一 ID
function getUuid() {
  // 生成一个随机的唯一标识符，由当前时间戳和随机数拼接而成
  return Math.random().toString(36).substring(2, 8) + Date.now().toString(36);
}

// 注册 Hexo 的过滤器，在文章渲染后处理代码块
hexo.extend.filter.register(
  "after_post_render",
  (data) => {
    // 获取代码高亮设置
    const { line_number, lib } = hexo.theme.config.code.highlight;

    let reg;
    // 根据使用的高亮库设置正则表达式
    if (lib === "highlightjs") {
      if (line_number) {
        reg = /(<figure class="highlight.+?>)(.+?hljs (.*?)".+?)(<\/figure>)/gims; // 处理包含行号的 figure
      } else {
        reg = /(<div class="code-wrapper.+?>)(.+?hljs (.*?)".+?)(<\/div>)/gims; // 处理不包含行号的 div
      }
    } else if (lib === "prismjs") {
      reg = /(<div class="code-wrapper.+?>)(.+?data-language="(.*?)".+?)(<\/div>)/gims; // 处理 PrismJS 的代码块
    }

    // match begin inner lang end offset string 分别表示的意思是：匹配到的内容的开始、内容、语言、结束、偏移量、原始字符串
    data.content = data.content.replace(reg, (match, begin, inner, lang, end, offset, string) => {
      const collapseId = `collapse-${getUuid()}`; // 生成唯一的折叠 ID

      // 创建一个容器，用于包裹按钮和语言提示
      const collapseContainer = `
        <div class="collapse-header">
          <button class="collapse-btn collapsed" type="button" data-toggle="collapse" data-target="#${collapseId}">
            <svg t="1730562455310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9905">
              <path d="M857.766234 511.488511L345.623017 0 297.174825 49.348412 759.846873 511.488511 297.174825 974.651588 345.623017 1022.977023z" fill="#ffffff" p-id="9906">
              </path>
            </svg>
          </button>
          <span>${lang}</span> <!-- 显示代码语言 -->
        </div>
      `;
      // collapse表示默认收起，collapse show表示默认展开
      const collapseDiv = `<div class="collapse" id="${collapseId}">${inner}</div>`;
      return begin + collapseContainer + collapseDiv + end; // 返回修改后的内容
    });
    return data; // 返回处理后的数据
  },
  10000 // 设置优先级，使得在其他渲染后执行
);

const collapseDiv = `<div class="collapse" id="${collapseId}">${inner}</div>`;

<button class="collapse-btn collapsed" ...略...

// 给代码收起按钮添加监听事件
const collapseBtns = document.querySelectorAll('.collapse-header button');
collapseBtns.forEach(button => {
  button.addEventListener('click', () => {
    // 获取当前按钮的类名
    const btnClassName = button.className; // 使用 button 变量，而不是 collapseBtns
    const codeTypeSpan = button.nextElementSibling; // 获取当前按钮后面的 span 标签
    // console.log('当前获取到的按钮类名为：', btnClassName);
    // console.log('当前获取到的 span 标签为：', codeTypeSpan);
    // console.log('当前检测展开状态：', btnClassName.includes('collapsed'));

    if (btnClassName.includes('collapsed')) { // 判断按钮是否在展开状态
      // 展开之后将 span 标签设为隐藏
      codeTypeSpan.style.display = 'none';
    } else {
      // 收起之后将 span 标签设为显示
      codeTypeSpan.style.display = 'inline-block';
    }
  });
});

// 获取唯一 ID
function getUuid() {
  return Math.random().toString(36).substring(2, 8) + Date.now().toString(36);
}

// 注册 Hexo 的过滤器，在文章渲染后处理代码块
hexo.extend.filter.register(
  "after_post_render",
  (data) => {
    const { line_number, lib } = hexo.theme.config.code.highlight;

    let reg;
    if (lib === "highlightjs") {
      reg = line_number 
        ? /(<figure class="highlight.+?>)(.+?hljs (.*?)".+?)(<\/figure>)/gims 
        : /(<div class="code-wrapper.+?>)(.+?hljs (.*?)".+?)(<\/div>)/gims;
    } else if (lib === "prismjs") {
      reg = /(<div class="code-wrapper.+?>)(.+?data-language="(.*?)".+?)(<\/div>)/gims;
    }

    data.content = data.content.replace(reg, (match, begin, inner, lang, end) => {
      const collapseId = `collapse-${getUuid()}`;

      const collapseContainer = `
        <div class="collapse-header" data-toggle="collapse" data-target="#${collapseId}">
          <button class="collapse-btn collapsed" type="button">
            <svg t="1730562455310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9905">
              <path d="M857.766234 511.488511L345.623017 0 297.174825 49.348412 759.846873 511.488511 297.174825 974.651588 345.623017 1022.977023z" fill="#ffffff" p-id="9906"></path>
            </svg>
          </button>
          <span>${lang}</span>
        </div>
      `;
      const collapseDiv = `<div class="collapse" id="${collapseId}">${inner}</div>`;
      return begin + collapseContainer + collapseDiv + end;
    });
    return data;
  },
  10000
);

/**
 * 给代码收起按钮和整个 header 添加监听事件
 */
const collapseHeaders = document.querySelectorAll('.collapse-header');
collapseHeaders.forEach(header => {
  const button = header.querySelector('button');
  const codeTypeSpan = header.querySelector('span');

  header.addEventListener('click', () => {
    console.log('header clicked');
    
    // 手动切换按钮的类名
    button.classList.toggle('collapsed');

    // 根据按钮状态显示或隐藏 span
    if (button.classList.contains('collapsed')) {
      // console.log('收起代码块');
      codeTypeSpan.style.display = 'inline-block';
    } else {
      // console.log('展开代码块');
      codeTypeSpan.style.display = 'none';
    }
  });

  button.addEventListener('click', (event) => {
    // 阻止事件冒泡，避免触发 header 的点击事件
    event.stopPropagation();
  });
});