// @ts-nocheck
import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import "./index.scss";
import { AtButton, AtInput, AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState, useRef } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import Taro from "@tarojs/taro";
import { AtAvatar } from "taro-ui";
import { AtTag } from "taro-ui";
import { AtList, AtListItem } from "taro-ui";
import { AtForm, AtMessage, AtDrawer, AtIcon } from "taro-ui";
import { marked } from "marked";
import infoText from "./info.md";
import bookText from "./book.md";
// import youtubeIco from "../../images/youtube.ico";

marked.setOptions({
  breaks: true, // 是否回车换行
  gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
  // pedantic: true, //严格模式
  // highlight(code:any, lang:any) {
  //   //  语法高亮
  //   let val = code;
  //   if (lang) {
  //     val = hljs.highlight(lang, code).value;
  //   } else {
  //     val = hljs.highlightAuto(code).value;
  //   }
  //   return val;
  // },
});

// const renderer = new marked.Renderer();
// // 使用拓展
// marked.use({ renderer });

// export default class Index extends Component {
const Book = () => {
  const [book, setbook] = useState(window.localStorage.getItem("book"));
  const [markText, setmarkText] = useState(book == 1 ? bookText : infoText);
  const [isWeChat, setisWeChat] = useState(false);
  const [show, setshow] = useState(false);

  const [headers, setHeaders] = useState([]); // 存储所有 <h1> 的内容
  const contentRef = useRef(null); // 用于获取渲染后的 DOM

  useEffect(() => {
    //  window.localStorage.removeItem("book");
    isWeChatFun();
  }, []);

  useEffect(() => {
    if (contentRef.current) {
      const h1Elements = contentRef.current.querySelectorAll("h1");
      const h2Elements = contentRef.current.querySelectorAll("h2");

      const h1Texts = Array.from(h1Elements).map((el) => el.textContent);
      const h2Texts = Array.from(h2Elements).map((el) => el.textContent);

      setHeaders(h1Texts);
      // console.log("获取到的 H1 标题:"); // 控制台查看
      console.log("获取到的 H1 标题:", h1Texts); // 控制台查看
      console.log("获取到的 H2 标题:", h2Texts); // 控制台查看
    }
  }, [markText]); // 监听 HTML 内容变化

  const handleJump = (text) => {
    const h1Elements = contentRef.current.querySelectorAll("h1");
    for (let h1 of h1Elements) {
      if (h1.textContent.trim() === text.trim()) {
        // if (h1.textContent === text) {
        h1.scrollIntoView({ behavior: "smooth" });
        break;
      }
    }
  };

  // const handleClick = (value) => {
  //   // 跳转到目的页面，在当前页面打开
  //   Taro.navigateTo({
  //     url: "/pages/index/index",
  //   });
  // };

  // 是否在微信客户端
  const isWeChatFun = () => {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf("micromessenger") != -1) {
      setisWeChat(true);
      return true;
    } else {
      setisWeChat(false);
      return false;
    }
  };

  const payh5 = (type, total_fee = 1000) => {
    // console.log("111");
    Taro.request({
      method: "POST",
      url: `${process.env.TARO_API_API}/payh5`, //仅为示例，并非真实的接口地址
      // url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址

      data: {
        callback_url: window.location.href,
        openid: window.localStorage.getItem("openid"),
        total_fee: total_fee, // 金额,单位:分
        type: type, //订单类型 book/meetup/video/vip
      },
      header: {
        "content-type": "application/json", // 默认值
      },
      success: function (res) {
        console.log(res.data);
        // window.alert(res.data.jsapi);
        WeixinJSBridge.invoke(
          "getBrandWCPayRequest",
          {
            // 以下6个支付参数通过payjs的jsapi接口获取
            // appId: "wxc5205a653b0259bf",
            // timeStamp: "1701401644",
            // nonceStr: "KhOYB0wFV6j9qyQK",
            // package: "prepay_id=wx01113404850024729b35f4d69b73500000",
            // signType: "MD5",
            // paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
            ...(res?.data?.jsapi ?? {}),
          },
          function (res) {
            // 支付成功
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              window.localStorage.setItem(type, 1); //订单类型 book/meetup/video/vip
              WeixinJSBridge.call("closeWindow");
            }
          }
        );
      },
    });
  };

  return (
    <>
      <View className="book_header_div"></View>
      <View className="book_header">
        <View
          className="book_header_left"
          onClick={() => {
            Taro.redirectTo({
              url: `/`,
            });
            // Taro.navigateBack({
            //   delta: 1, // 表示返回的页面数，默认是 1，表示返回上一页
            // });
          }}
        >
          <AtIcon value="chevron-left"></AtIcon>
        </View>
        <View className="book_header_middle">{`云手机`}</View>
        <View
          className="book_header_right"
          onClick={() => {
            setshow(!show);
          }}
        >
          <AtIcon value="bullet-list"></AtIcon>
        </View>
      </View>
      <View className="Book">
        <View
          ref={contentRef}
          className="markdown-body" // 添加 GitHub Markdown 主题类
          dangerouslySetInnerHTML={{
            // __html: marked(markText),
            __html: marked(book == 1 ? bookText : infoText),
          }}
        ></View>

        <AtDrawer
          className="book_AtDrawer"
          show={show}
          mask
          items={headers}
          onItemClick={(index) => {
            handleJump(headers[index]);
          }}
          onClose={() => {
            setshow(false);
          }}
        >
          <View className="drawer-item"></View>
          {/* <View className="drawer-item">如果items没有数据就会展示children</View> */}
          {/* <View className="drawer-item">
          这是自定义内容 <AtIcon value="home" size="20" />
        </View> */}
        </AtDrawer>

        {/* 判断有没有wxid */}
        {book !=1 ? (
          <AtButton
            type="primary"
            size="normal"
            className="joinSalon"
            onClick={() => {
              if (book == 1) {
                return false;
              } else {
                if (!!isWeChat) {
                  //98元
                  payh5("book", 9800);
                } else {
                  window.location.href = `https://mp.weixin.qq.com/s/GBU3THKaXRRkdpZXH_18jw`;
                }
              }
            }}
          >
            {`阅读更多`}
          </AtButton>
        ) : <span style={{color:'green'}}>持续更新中....</span>}

        {/* <AtButton
          type="primary"
          size="normal"
          className="joinSalon"
          onClick={() => {
            if (book == 1) {
              return false;
            } else {
              if (!!isWeChat) {
                // 198元
                payh5("group", 29800);
              } else {
                window.location.href = `https://mp.weixin.qq.com/s/GBU3THKaXRRkdpZXH_18jw`;
              }
            }
          }}
        >
          {`游民社群`}
        </AtButton> */}
      </View>
    </>
  );
};

export default Book;