import { $, log } from "@/env";
import { UISlider } from "@components/setting/components/ui-slider";
import { UISwitch } from "@components/setting/components/ui-switch";
import type { PopsPanelContentConfig } from "@whitesev/pops/dist/types/src/components/panel/types/index.js";

const SettingUI_Article: PopsPanelContentConfig = {
  id: "xhs-panel-config-article",
  title: "笔记",
  views: [
    {
      type: "container",
      text: "功能",
      views: [
        UISwitch(
          "显示发布、修改的绝对时间",
          "pc-xhs-article-showPubsliushTime",
          false,
          void 0,
          "注：需要开启<code>通用</code>-<code>劫持/拦截</code>-<code>劫持Vue</code>"
        ),
      ],
    },
    {
      text: "笔记宽屏",
      type: "container",
      views: [
        UISwitch(
          "启用",
          "pc-xhs-article-fullWidth",
          false,
          void 0,
          `让笔记占据宽屏，当页面可视宽度>=960px时才会触发该功能，当前页面可视宽度: ${window.innerWidth}px`
        ),
        UISlider(
          "占据范围",
          "pc-xhs-article-fullWidth-widthSize",
          90,
          30,
          100,
          (event, value) => {
            let $noteContainer = $<HTMLDivElement>("#noteContainer");
            if (!$noteContainer) {
              log.error("未找到笔记容器");
              return;
            }
            $noteContainer.style.width = `${value}vw`;
          },
          (value) => {
            return `${value}%，默认：90%`;
          },
          "调整笔记页面占据的页面范围"
        ),
        UISlider(
          "图片尺寸",
          "pc-xhs-article-fullWidth-imageSize",
          80,
          30,
          100,
          (event, value) => {
            let $noteContainer = $<HTMLDivElement>("#noteContainer");
            if (!$noteContainer) {
              log.error("未找到笔记容器");
              return;
            }
            let $mediaContainer = $noteContainer.querySelector<HTMLDivElement>(".media-container");
            if (!$mediaContainer) {
              log.error("未找到媒体容器");
              return;
            }
            if (window.innerWidth >= 960) {
              $mediaContainer.style.width = `${value}%`;
              $mediaContainer.style.height = "";
            } else {
              $mediaContainer.style.height = `${value}%`;
              $mediaContainer.style.width = "";
            }
          },
          (value) => {
            return `${value}%，默认：80%`;
          },
          "横向布局时调整宽度，竖向布局时调整高度"
        ),
      ],
    },
  ],
};

export { SettingUI_Article };