// 从 'ant-design-vue/es' 模块中导入名为'message' 的对象（在 Ant Design Vue 框架中，message 通常用于展示各种提示信息，比如成功、失败、加载等提示消息）
import { message } from 'ant-design-vue/es';
// 原本可能用于导入项目中的默认配置信息，此处被注释掉了，可能暂时不需要或者后续再启用这个功能
// import defaultSettings from '../defaultSettings';

// 定义一个变量 lessNodesAppended，用于标记是否已经向页面中添加了与 Less（一种 CSS 预处理器）相关的节点元素，初始值为 false
let lessNodesAppended;

// 定义一个数组 colorList，数组中的每个元素是一个对象，用于表示不同的颜色选项。每个对象包含一个 key（颜色名称，用于展示给用户识别等）和 color（对应的十六进制颜色值）属性，例如可以用于主题颜色的选择列表等场景
const colorList = [
  {
    key: '薄暮', color: '#F5222D'
  },
  {
    key: '火山', color: '#FA541C'
  },
  {
    key: '日暮', color: '#FAAD14'
  },
  {
    key: '明青', color: '#13C2C2'
  },
  {
    key: '极光绿', color: '#52C41A'
  },
  {
    key: '拂晓蓝（默认）', color: '#1890FF'
  },
  {
    key: '极客蓝', color: '#2F54EB'
  },
  {
    key: '酱紫', color: '#722ED1'
  }
];

// 定义一个名为 updateTheme 的函数，用于更新页面主题颜色，接收一个表示主颜色（primaryColor）的参数
const updateTheme = primaryColor => {
  // 以下代码块被注释掉了，原本的意图可能是在生产环境下不进行 Less 的编译操作，不过目前是处于注释状态，可根据实际需求决定是否启用
  // Don't compile less in production!
  /* if (process.env.NODE_ENV === 'production') {
    return;
  } */
  // 如果传入的主颜色参数为空值，则直接返回，不进行后续主题更新操作
  if (!primaryColor) {
    return;
  }
  // 调用 message.loading 方法显示一个加载提示信息，提示内容为“正在编译主题！”，并且设置显示时长为 0（可能表示一直显示，直到手动隐藏，常用于长时间操作的提示场景），并将返回的隐藏函数赋值给 hideMessage 变量，方便后续操作完成后隐藏该提示
  const hideMessage = message.loading('正在编译主题！', 0);
  function buildIt () {
    // 判断 window 对象上是否存在 less 属性（less.js 库加载后会在 window 上添加相关属性和方法，用于操作 Less 样式编译等），如果不存在则直接返回，无法进行后续主题更新相关的 Less 操作
    if (!window.less) {
      return;
    }
    // 使用 setTimeout 设置一个延迟执行的定时器，延迟 200 毫秒后执行以下操作（可能是为了等待一些资源加载等情况）
    setTimeout(() => {
      // 通过 window.less 的 modifyVars 方法来修改 Less 变量，这里将 '@primary-color' 这个 Less 变量的值修改为传入的 primaryColor 参数值，用于改变主题颜色相关的样式变量定义
      window.less
        .modifyVars({
          '@primary-color': primaryColor
        })
        // 如果修改成功，调用 hideMessage 函数隐藏之前显示的加载提示信息
        .then(() => {
          hideMessage();
        })
        // 如果修改过程出现错误，先调用 message.error 方法显示一个错误提示消息“Failed to update theme”告知用户主题更新失败，然后再调用 hideMessage 函数隐藏加载提示信息
        .catch(() => {
          message.error('Failed to update theme');
          hideMessage();
        });
    }, 200);
  }
  // 判断是否已经添加过与 Less 相关的节点元素，如果没有添加过（lessNodesAppended 为 false）
  if (!lessNodesAppended) {
    // 创建一个 link 元素，用于引入 Less 样式文件，这里将用于引入项目中的 'color.less' 文件（可能定义了基于 Less 的各种样式以及主题相关的变量等内容）
    const lessStyleNode = document.createElement('link');
    // 创建一个 script 元素，用于配置 Less 的相关运行环境设置，比如设置为异步加载、生产环境模式以及启用 JavaScript 与 Less 的交互等功能
    const lessConfigNode = document.createElement('script');
    // 创建一个 script 元素，用于引入 less.js 库的线上压缩版本（版本号为 3.8.1），less.js 是用于在浏览器端编译 Less 样式的库
    const lessScriptNode = document.createElement('script');
    // 设置 link 元素的 rel 属性为'stylesheet/less'，表示这是一个 Less 样式表的引用链接
    lessStyleNode.setAttribute('rel', 'stylesheet/less');
    // 设置 link 元素的 href 属性为 '/color.less'，指定要引入的 Less 样式文件的路径
    lessStyleNode.setAttribute('href', '/color.less');
    // 通过 innerHTML 为 script 元素（lessConfigNode）设置内容，定义了 window.less 对象的一些配置属性，比如设置为异步操作、指定环境为生产环境以及启用 JavaScript 功能等，这些配置会影响 less.js 在页面中的运行方式
    lessConfigNode.innerHTML = `
      window.less = {
        async: true,
        env: 'production',
        javascriptEnabled: true
      };
    `;
    // 设置 script 元素（lessScriptNode）的 src 属性，指定引入 less.js 库的线上地址
    lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
    // 设置 script 元素（lessScriptNode）为异步加载模式，这样不会阻塞页面其他资源的加载
    lessScriptNode.async = true;
    // 为 lessScriptNode 的 onload 事件绑定一个回调函数，当 less.js 库加载完成后会执行这个回调函数，在回调函数中调用 buildIt 函数来进行主题更新相关的 Less 变量修改操作，并且在执行完成后将 onload 事件的回调函数设置为 null，避免重复执行
    lessScriptNode.onload = () => {
      buildIt();
      lessScriptNode.onload = null;
    };
    // 将创建好的 link 元素（lessStyleNode）添加到页面的 body 元素中，使其生效，引入相关的 Less 样式文件
    document.body.appendChild(lessStyleNode);
    // 将配置 Less 运行环境的 script 元素（lessConfigNode）添加到页面的 body 元素中，使其配置生效
    document.body.appendChild(lessConfigNode);
    // 将引入 less.js 库的 script 元素（lessScriptNode）添加到页面的 body 元素中，开始加载 less.js 库
    document.body.appendChild(lessScriptNode);
    // 将 lessNodesAppended 标记变量设置为 true，表示已经添加过相关的 Less 节点元素了，后续再次调用 updateTheme 函数时可以直接执行 buildIt 函数进行主题更新操作，无需重复添加节点元素
    lessNodesAppended = true;
  } else {
    // 如果已经添加过 Less 相关的节点元素了，直接调用 buildIt 函数进行主题更新操作（即修改 Less 变量来更新主题颜色相关的样式）
    buildIt();
  }
};

// 定义一个名为 updateColorWeak 的函数，用于更新页面是否应用弱色模式（可能是为了满足一些特殊的视觉需求，比如高对比度模式等），接收一个表示是否启用弱色模式（colorWeak）的布尔值参数
const updateColorWeak = colorWeak => {
  // 以下这行代码被注释掉了，原本的做法是通过直接设置 document.body 的 className 属性来添加或移除 'colorWeak' 类名，不过现在采用了更推荐的 classList 的方式来操作类名
  // document.body.className = colorWeak? 'colorWeak' : '';
  // 根据传入的 colorWeak 参数值，如果为 true，则给 document.body 元素添加 'colorWeak' 类名，否则移除该类名，以此来切换页面的弱色模式相关的样式应用（通常会在 CSS 中定义了对应 'colorWeak' 类名的样式规则来实现弱色效果）
  colorWeak? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak');
};

// 将 updateTheme、colorList、updateColorWeak 这三个函数或变量导出，方便在其他模块中引入并使用它们，例如在其他模块中可以调用 updateTheme 函数来更新主题颜色，使用 colorList 数组来展示颜色选择列表等
export { updateTheme, colorList, updateColorWeak };