import { DOMUtils, addStyle, cookieManager, log, utils } from "@/env";
import { DouYinRouter } from "@/router/DouYinRouter";
import { Panel, type ExecMenuCallBackOption } from "@components/setting/panel";
import Qmsg from "qmsg";
import MobileCSS from "./css/mobile.css?raw";
import { DouYinSearchBlock } from "./DouYinSearchBlock";
import { DouYinRouterChangeData } from "../DouYinRouterChangeData";

export const DouYinSearch = {
  init() {
    DouYinSearchBlock.init();
    Panel.execMenu("dy-search-setSearchResultType", (option) => {
      if (utils.isNull(option.value)) return;
      if (DouYinRouterChangeData.beforeURL == null || !DouYinRouter.isSearch(DouYinRouterChangeData.beforeURL)) {
        // 当前首次访问|Router改变前不是搜索结果页
        this.setSearchResultType(option.value);
      }
    });
    Panel.execMenuOnce("dy-search-allowContextMenu", () => {
      return this.allowContextMenu();
    });
    Panel.execMenuOnce("mobileMode", (option) => {
      return this.mobileMode(option);
    });
    Panel.execMenuOnce("dy-search-disableClickToEnterFullScreen", () => {
      return this.disableClickToEnterFullScreen();
    });
    Panel.execMenuOnce("dy-search-setSearchResultFilterWithVideoStyle", (option) => {
      return this.setSearchResultFilterWithVideoStyle(option.value);
    });
  },
  /**
   * 搜索结果类型
   * @param value 选择类型
   */
  setSearchResultType(value: "general" | "video" | "user" | "live") {
    log.info(`设置搜索结果类型: ${value}`);
    const typeSelectors = {
      general: '#search-toolbar-container span[data-key="general"]',
      video: '#search-toolbar-container span[data-key="video"]',
      user: '#search-toolbar-container span[data-key="user"]',
      live: '#search-toolbar-container span[data-key="live"]',
    };
    if (!(value in typeSelectors)) {
      throw new Error(`搜索结果类型错误：${value}`);
    }
    DOMUtils.waitNode(typeSelectors[value], 1e4).then(($el) => {
      if (!$el) return;
      $el.click();
    });
  },
  /**
   * 手机模式
   * (由通用统一调用，勿放在本函数的init内)
   */
  mobileMode(option: ExecMenuCallBackOption) {
    log.info("搜索-手机模式");
    let result: HTMLStyleElement[] = [];
    result.push(addStyle(MobileCSS));
    result.push(
      addStyle(/*css*/ `
			@media screen and (max-width: 550px){
				div#search-body-container {
					display: flex;
				}
				div#search-body-container #component-Navigation {
					flex: 0;
				}
				div#search-body-container #douyin-right-container {
					flex: 1 auto;
				}
				div#search-body-container #douyin-right-container #search-content-area > div {
					width: 100% !important;
				}
				div#search-body-container #douyin-right-container #search-content-area > div > div > div {
					width: 100% !important;
					margin-left: 0px;
					margin-right: 0px;
					padding-left: 0px;
					padding-right: 0px;
				}
				/* 上面的搜索结果筛选 */
				#search-content-area > div >div> div:first-child > div:first-child > div:last-child{
					overflow: auto;
					text-wrap: nowrap;
					height: auto;
				}
				/* 视频右侧的TA的作品↓ */
				#searchSideCard{
					width: unset !important;
				}
				#searchSideCard > div{
					padding: 0px !important;
				}
				#searchSideCard > div:has(>div+svg),
				#searchSideCard ul[data-e2e="scroll-list"]{
					padding: 0px 10px !important;
				}
				#searchSideCard ul[data-e2e="scroll-list"] .video-playing-item > div{
					width: auto;
				}
				/* 视频右侧的TA的作品↑ */
				/* 悬浮的筛选 */
				#douyin-right-container #douyin-header{
        			background-color: var(--color-bg-b0);
				}
				xg-right-grid{
					margin: auto !important;
				}
			}
		`)
    );
    /* 评论区展开才会出现 */
    DOMUtils.waitNode<HTMLElement>("#relatedVideoCard").then(($relatedVideoCard) => {
      log.info("评论区展开的className：" + $relatedVideoCard.className);
      option.addStoreValue(
        addStyle(/*css*/ `
					html[data-vertical-screen]
						#sliderVideo[data-e2e="feed-active-video"]
						#videoSideBar:has(#relatedVideoCard[class="${$relatedVideoCard.className}"]) {
							width: 100vw !important;
					}`)
      );
    });

    return result;
  },
  /**
   * 禁止点击视频区域进入全屏
   */
  disableClickToEnterFullScreen() {
    log.info("搜索-禁止点击视频区域进入全屏");
    // 这个是对应 图文视频
    const result1 = DOMUtils.on(
      document,
      "click",
      ".focusPanel",
      (event, selectorTarget) => {
        if (!DouYinRouter.isSearch()) {
          return;
        }
        DOMUtils.preventEvent(event);
        const $click = selectorTarget;
        const $parent = $click.parentElement?.parentElement as HTMLElement;
        const $video = $parent.querySelector("video");
        if ($video) {
          if ($video.paused) {
            $video.play();
            log.info(".focusPanel：播放视频");
          } else {
            $video.pause();
            log.info(".focusPanel：暂停视频");
          }
        } else {
          Qmsg.error(".focusPanel未找到 video标签", {
            isHTML: false,
          });
        }
      },
      {
        capture: true,
        overrideTarget: false,
      }
    );
    // 这个是对应 纯视频
    const result2 = DOMUtils.on(
      document,
      "click",
      "#sliderVideo video",
      (event, selectorTarget) => {
        if (!DouYinRouter.isSearch()) {
          return;
        }
        DOMUtils.preventEvent(event);
        const $video = selectorTarget as any as HTMLVideoElement;
        if ($video.paused) {
          $video.play();
          log.info("#sliderVideo video：播放视频");
        } else {
          $video.pause();
          log.info("#sliderVideo video：暂停视频");
        }
      },
      {
        capture: true,
        overrideTarget: false,
      }
    );
    return [result1.off, result2.off];
  },
  /**
   * 设置搜索结果-按视频过滤的显示样式
   * @param lineMode 单列/双列
   */
  setSearchResultFilterWithVideoStyle(lineMode: "one" | "double" = "one") {
    log.info(`设置搜索结果-按视频过滤的显示样式：${lineMode}`);
    if (lineMode === "one") {
      cookieManager.update({
        name: "SEARCH_RESULT_LIST_TYPE",
        value: encodeURIComponent(`"single"`),
      });
      return addStyle(/*css*/ `
			@media screen and (max-width: 800px){
				.search-horizontal-new-layout ul[data-e2e="scroll-list"] li{
					width: calc(100% - 21px);
				}
			}
			`);
    } else if (lineMode === "double") {
      cookieManager.update({
        name: "SEARCH_RESULT_LIST_TYPE",
        value: encodeURIComponent(`"multi"`),
      });
      return addStyle(/*css*/ `	
			@media screen and (max-width: 800px){
				.search-horizontal-new-layout ul[data-e2e="scroll-list"] li{
					width: calc(50% - 21px);
				}
			}
			`);
    }
  },
  /**
   * 阻止屏蔽搜索框的右键菜单
   */
  allowContextMenu() {
    log.info(`阻止屏蔽搜索框的右键菜单`);
    const listener = DOMUtils.on(
      document,
      "contextmenu",
      ['input[data-e2e="searchbar-input"]'],
      (evt) => {
        DOMUtils.preventEvent(evt, true);
      },
      { capture: true, overrideTarget: false }
    );

    return [
      () => {
        listener.off();
      },
    ];
  },
};