import { DOMUtils, log, utils } from "@/env";
import { VideoQualityMap } from "@/main/live/DouYinLive";
import { DouYinLiveMessageFilter } from "@/main/live/DouYinLiveMessageFilter";
import { DouYinLiveShortCut } from "@/main/live/DouYinLiveShortCut";
import { UIButtonShortCut } from "@components/setting/components/ui-button-shortcut";
import { UIOwn } from "@components/setting/components/ui-own";
import { UISelect } from "@components/setting/components/ui-select";
import { UISwitch } from "@components/setting/components/ui-switch";
import { Panel } from "@components/setting/panel";
import type { PopsPanelContentConfig } from "@whitesev/pops/dist/types/src/components/panel/types/index.js";
import { AutoOpenOrClose } from "../all-open-or-close";

export const PanelLiveConfig: PopsPanelContentConfig = {
  id: "panel-config-live",
  title: "直播",
  views: [
    {
      text: "",
      type: "container",
      views: [
        {
          text: "功能",
          type: "deepMenu",
          views: [
            {
              text: "功能",
              type: "container",
              views: [
                UISelect<string>(
                  "清晰度",
                  "live-chooseQuality",
                  "origin",
                  (() => {
                    return Object.keys(VideoQualityMap).map((key: string) => {
                      const item = VideoQualityMap[key];
                      return {
                        value: key,
                        text: item.label,
                      };
                    });
                  })(),
                  void 0,
                  "自行选择清晰度"
                ),
                // UISwitch(
                // 	"解锁画质选择（已失效，请关闭该功能）",
                // 	"live-unlockImageQuality",
                // 	false,
                // 	void 0,
                // 	"未登录的情况下选择原画实际上是未登录的情况下最高选择的画质"
                // ),
                UISwitch(
                  "自动进入网页全屏",
                  "live-autoEnterElementFullScreen",
                  false,
                  void 0,
                  "网页加载完毕后自动点击网页全屏按钮进入全屏"
                ),
                UISwitch(
                  "监听并关闭【长时间无操作，已暂停播放】弹窗",
                  "live-waitToRemovePauseDialog",
                  true,
                  void 0,
                  "自动监听并检测弹窗"
                ),
                UISwitch("禁止自动播放", "live-pauseVideo", false),
                UISwitch("自动关闭聊天室", "dy-live-autoCloseChatRoom", false, void 0, "自动点击关闭聊天室按钮"),
                UISwitch("禁用鼠标滚轮切换直播间", "live-prevent-wheel-switchLiveRoom"),
                UISelect("双击video动作", "dy-live-doubleClickAction", "", [
                  {
                    text: "点赞（默认）",
                    value: "",
                  },
                  {
                    text: "网页全屏",
                    value: "website-fullscreen",
                  },
                  {
                    text: "全屏",
                    value: "fullscreen",
                  },
                ]),
                UISelect("单击video动作", "dy-live-oneClickAction", "", [
                  {
                    text: "无（默认）",
                    value: "",
                  },
                  {
                    text: "切换播放状态",
                    value: "switch-video-play-state",
                  },
                ]),
              ],
            },
            {
              text: "视频区域背景色",
              type: "container",
              views: [
                UISwitch("启用", "live-bgColor-enable", false, void 0, "自定义视频背景色"),
                UIOwn(
                  ($li) => {
                    const $left = DOMUtils.createElement("div", {
                      className: "pops-panel-item-left-text",
                      innerHTML: /*html*/ `
											<p class="pops-panel-item-left-main-text">视频背景颜色</p>
											<p class="pops-panel-item-left-desc-text">自定义视频背景颜色</p>
											`,
                    });
                    const $right = DOMUtils.createElement("div", {
                      className: "pops-panel-item-right",
                      innerHTML: /*html*/ `
											<input type="color" class="pops-color-choose" />
											`,
                    });
                    const $color = $right.querySelector<HTMLInputElement>(".pops-color-choose")!;
                    $color.value = Panel.getValue("live-changeBackgroundColor");
                    DOMUtils.on($color, ["input", "propertychange"], () => {
                      log.info("选择颜色：" + $color.value);
                      Panel.setValue("live-changeBackgroundColor", $color.value);
                    });

                    $li.appendChild($left);
                    $li.appendChild($right);
                    return $li;
                  },
                  {
                    "live-changeBackgroundColor": "#000000",
                  },
                  {
                    text: "视频背景颜色",
                    desc: "自定义视频背景颜色",
                  }
                ),
              ],
            },
          ],
        },
        {
          text: "自定义功能快捷键",
          type: "deepMenu",
          views: [
            {
              text: "",
              type: "container",
              views: [
                UIButtonShortCut(
                  "【屏蔽】顶栏信息",
                  "",
                  "live-shieldTopToolBarInfo",
                  void 0,
                  "点击录入快捷键",
                  void 0,
                  DouYinLiveShortCut.shortCut
                ),
                UIButtonShortCut(
                  "【屏蔽】小黄车",
                  "",
                  "dy-live-shortcut-shielYellowCar",
                  void 0,
                  "点击录入快捷键",
                  void 0,
                  DouYinLiveShortCut.shortCut
                ),
                UIButtonShortCut(
                  "【屏蔽】聊天室",
                  "",
                  "dy-live-block-chatroom",
                  void 0,
                  "点击录入快捷键",
                  void 0,
                  DouYinLiveShortCut.shortCut
                ),
                UIButtonShortCut(
                  "【屏蔽】礼物特效",
                  "",
                  "dy-live-shieldGiftEffects",
                  void 0,
                  "点击录入快捷键",
                  void 0,
                  DouYinLiveShortCut.shortCut
                ),
                UIButtonShortCut(
                  "【屏蔽】底部的礼物栏",
                  "",
                  "dy-live-shortcut-shieldGiftColumn",
                  void 0,
                  "点击录入快捷键",
                  void 0,
                  DouYinLiveShortCut.shortCut
                ),
                UIButtonShortCut(
                  "切换静音状态",
                  "切换video标签的muted属性",
                  "dy-live-shortcut-changeVideoMuted",
                  void 0,
                  "点击录入快捷键",
                  void 0,
                  DouYinLiveShortCut.shortCut
                ),
                UIButtonShortCut(
                  "切换播放状态",
                  "可快捷进行<code>播放</code>/<code>暂停</code>",
                  "dy-live-shortcut-switchPlayState",
                  void 0,
                  "点击录入快捷键",
                  void 0,
                  DouYinLiveShortCut.shortCut
                ),
              ],
            },
          ],
        },
        {
          type: "deepMenu",
          text: "禁用快捷键",
          afterEnterDeepMenuCallBack: AutoOpenOrClose.afterEnterDeepMenuCallBack,
          views: [
            {
              type: "container",
              text: AutoOpenOrClose.text,
              views: [
                UISwitch("三屏画面", "dy-live-threeScreen", false, void 0, "S"),
                UISwitch("刷新", "dy-live-refresh", false, void 0, "R"),
                UISwitch("屏幕旋转", "dy-live-screenRotation", false, void 0, "D"),
                UISwitch("开启小窗模式", "dy-live-enableSmallWindowMode", false, void 0, "U"),
                UISwitch("切换直播间", "dy-live-switchLiveRoom", false, void 0, "↑↓"),
                UISwitch("快捷键送礼", "dy-live-quickGift", false, void 0, "E"),
              ],
            },
          ],
        },
        {
          type: "deepMenu",
          text: "聊天室消息过滤器",
          afterEnterDeepMenuCallBack: AutoOpenOrClose.afterEnterDeepMenuCallBack,
          views: [
            {
              type: "container",
              text: "",
              views: [
                UISwitch("启用", "live-danmu-shield-rule-enable"),
                UISwitch("【屏蔽】送礼信息", "live-danmu-shield-gift"),
                UISwitch("【屏蔽】福袋口令", "live-danmu-shield-lucky-bag"),
                UISwitch("【屏蔽】emoji|图片|表情包", "live-message-shield-method-emoji-chat"),
                UISwitch(
                  "【屏蔽】信息播报",
                  "live-message-shield-room-message",
                  false,
                  void 0,
                  "如：xxx 为主播加了 xx分、恭喜xxx等"
                ),
              ],
            },
            {
              type: "container",
              text: "",
              views: [
                UIOwn(($li: HTMLLIElement) => {
                  const $textareaWrapper = DOMUtils.createElement(
                    "div",
                    {
                      className: "pops-panel-textarea",
                      innerHTML: `<textarea placeholder="请输入屏蔽规则，每行一个\n例如：屏蔽包含'主播'的消息\n主播" style="height:350px;"></textarea>`,
                    },
                    {
                      style: "width: 100%;",
                    }
                  );
                  const textarea = $textareaWrapper.querySelector("textarea")!;
                  textarea.value = DouYinLiveMessageFilter.get();
                  DOMUtils.on(
                    textarea,
                    ["input", "propertychange"],
                    utils.debounce(function () {
                      DouYinLiveMessageFilter.set(textarea.value);
                      DouYinLiveMessageFilter.initRule();
                    }, 1000)
                  );
                  $li.appendChild($textareaWrapper);
                  return $li;
                }),
              ],
            },
          ],
        },
      ],
    },
    {
      text: "",
      type: "container",
      views: [
        {
          text: "布局屏蔽-视频区域内",
          type: "deepMenu",
          afterEnterDeepMenuCallBack: AutoOpenOrClose.afterEnterDeepMenuCallBack,
          views: [
            {
              text: AutoOpenOrClose.text,
              type: "container",
              views: [
                UISwitch(
                  "【屏蔽】顶栏信息",
                  "live-shieldTopToolBarInfo",
                  false,
                  void 0,
                  "包括直播作者、右侧的礼物展馆"
                ),
                UISwitch("【屏蔽】底部的礼物栏", "live-shieldGiftColumn"),
                UISwitch("【屏蔽】礼物特效", "live-shieldGiftEffects"),
                UISwitch("【屏蔽】福袋", "live-shieldLucky"),
                UISwitch("【屏蔽】小黄车", "live-shielYellowCar"),
                UISwitch(
                  "【屏蔽】点亮展馆帮主播集星",
                  "live-block-exhibition-banner-dylive-tooltip",
                  false,
                  void 0,
                  "礼物展馆下面的悬浮提示"
                ),
              ],
            },
            {
              type: "container",
              text: "弹幕",
              views: [
                UISwitch("【屏蔽】弹幕", "live-shieldDanmuku"),
                UISwitch("【屏蔽】送礼信息", "dy-live-danmaku-block-gift"),
                UISwitch("【屏蔽】福袋口令", "dy-live-danmaku-block-lucky-bag"),
              ],
            },
            {
              type: "container",
              text: "右键菜单",
              views: [
                UISwitch(
                  "【屏蔽】下载客户端",
                  "dy-live-blockVideoRightMenu-downloadClient",
                  true,
                  void 0,
                  "屏蔽右键菜单项"
                ),
              ],
            },
          ],
        },
        {
          type: "deepMenu",
          text: "布局屏蔽-播放器-底部-播放器组件",
          afterEnterDeepMenuCallBack: AutoOpenOrClose.afterEnterDeepMenuCallBack,
          views: [
            {
              type: "container",
              text: AutoOpenOrClose.text,
              views: [UISwitch("【屏蔽】播放器组件", "dy-live-player-block", false, void 0, "整个播放器组件")],
            },
            {
              type: "container",
              text: "",
              views: [
                UISwitch("【屏蔽】播放", "dy-live-player-block-play", false, void 0, "播放|暂停按钮"),
                UISwitch("【屏蔽】刷新", "dy-live-player-block-refresh"),
              ],
            },
            {
              type: "container",
              text: "",
              views: [
                UISwitch("【屏蔽】清晰度", "dy-live-player-block-playclarity"),
                UISwitch("【屏蔽】三屏画面", "dy-live-player-block-threeScreen"),
                UISwitch("【屏蔽】屏幕旋转", "dy-live-player-block-rotate"),
                UISwitch("【屏蔽】弹幕开关", "dy-live-player-block-danmukuSwitch"),
                UISwitch("【屏蔽】礼物设置", "dy-live-player-block-giftSetting"),
                UISwitch("【屏蔽】音量", "dy-live-player-block-volume"),
                UISwitch("【屏蔽】小窗模式", "dy-live-player-block-miniMode"),
                UISwitch("【屏蔽】网页全屏", "dy-live-player-block-pageFullScreen"),
                UISwitch("【屏蔽】进入全屏", "dy-live-player-block-fullScreen"),
              ],
            },
          ],
        },
        {
          text: "布局屏蔽-聊天室",
          type: "deepMenu",
          afterEnterDeepMenuCallBack: AutoOpenOrClose.afterEnterDeepMenuCallBack,
          views: [
            {
              text: AutoOpenOrClose.text,
              type: "container",
              views: [
                UISwitch("【屏蔽】聊天室", "live-shieldChatRoom"),
                UISwitch("【屏蔽】副屏", "live-shieldDoubleScreen", false, void 0, "直播副屏，显示在贵宾席的上面"),
                UISwitch("【屏蔽】贵宾席", "live-shielChatRoomVipSeats"),
                UISwitch("【屏蔽】用户等级图标", "dy-live-shieldUserLevelIcon"),
                UISwitch("【屏蔽】VIP图标", "dy-live-shieldUserVIPIcon"),
                UISwitch("【屏蔽】粉丝牌", "dy-live-shieldUserFansIcon"),
                UISwitch(
                  "【屏蔽】信息播报",
                  "dy-live-shieldMessage",
                  false,
                  void 0,
                  "顶部左右滚动播报（xxx进入/加入了直播间），底部滚动播报（xxx来了，xxx给主播点赞）"
                ),
                UISwitch(
                  "【屏蔽】底部遮挡区域",
                  "dy-live-blockBottomArea",
                  true,
                  void 0,
                  "该元素会遮挡部分聊天信息，导致显示不全"
                ),
              ],
            },
          ],
        },
      ],
    },
  ],
};