"use client";

import React, { useEffect, useRef, useState } from "react";
import { JumboTabs, List, InfiniteScroll, Avatar } from "antd-mobile";
// import { useRouter } from "next/navigation";
import { useRouter } from "next/navigation";
import {useSearchParams, usePathname,useParams} from "next/navigation"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import Empty from "@/components/Empty";
import styles from "./index.module.scss"
import webviewBaseRequest from "@/utils/webviewBaseRequest";
import { generateSignature } from "@/utils/crypto";
export default function Relationship() {
  const [currentKey, setCurrentKey] = useState("follow");
  const [hasMore, setHasMore] = useState(true);
  // const router = useRouter();
  const router = useRouter();
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const params = useParams();
  const [scrollHeight, setScrollHeight] = useState(0);
  // 获取屏幕高度
  // const scrollHeight = 600;
  useEffect(() => {
    const data = getData();
    console.log("getData",getData)
  }, []);
  useEffect(() => {
    const key = searchParams.get("key");
    // console.log('nnnnn',searchParams.get("key"))
    key && setCurrentKey(key)
  }, [searchParams])
  async function loadMore() {
    const append = await mockRequest();
    setData((val) => [...val, ...append]);
    setHasMore(append.length > 0);
  }
  const getData = async () => {
    const base = webviewBaseRequest();
    const signature = generateSignature({
      ...base,
      b_mid:182308
    });
    return await fetch(
      `/api/vas/income_page?signature=${signature}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          ...base,
          b_mid:182308
        }),
      }
    )
  };
  return (
    <div className={styles.relationshipBox}>
      <div className="p-4 fixed top-0 z-10 w-full">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">关系</p>
      </div>
      {/* 内容 */}
      <div className="pt-16 px-4">
        <JumboTabs
          onChange={(key) => setCurrentKey(key)}
          activeKey={currentKey}
          className={`bg-deepBg ${styles.jumboTabs}`}
        >
          <JumboTabs.Tab
            title="关注"
            key="follow"
            description={
              currentKey == "all" && (
                <div className="titlePinkLine relative w-full"></div>
              )
            }
            destroyOnClose={true}
          >
            <List className="overflow-y-auto scrollbarBox_hidden">
              <List.Item className={`!p-0 ${styles.listTimeBox}`}>
                <div className="grid gap-2 items-center" style={{gridTemplateColumns:"48px calc(100% - 128px) 64px"}}>
                  <Avatar src="https://picsum.photos/seed/picsum/200/300" style={{"--border-radius":"50px"}}/>
                  <div>
                    <p>XXXXXX</p>
                    <p className="text-xs truncate">
                      专属圈内容都在空间里，永久更新外面看不到哟
                    </p>
                  </div>
                  <div className="text-sm leading-9 h-max bg-[#FFFFFF1A] px-2 rounded-full whitespace-nowrap flex items-center justify-center">
                    关注
                  </div>
                </div>
              </List.Item>
              <List.Item className={`!p-0 ${styles.listTimeBox}`}>
                <div className="grid gap-2 items-center" style={{gridTemplateColumns:"48px calc(100% - 128px) 64px"}}>
                  <Avatar src="https://picsum.photos/seed/picsum/200/300" style={{"--border-radius":"50px"}}/>
                  <div>
                    <p>XXXXXX</p>
                    <p className="text-sm truncate">
                      专属圈内容都在空间里，永久更新外面看不到哟
                    </p>
                  </div>
                  <div className="text-sm leading-9 h-max bg-[#FFFFFF1A] px-2 rounded-full whitespace-nowrap flex items-center justify-center">
                    已关注
                  </div>
                </div>
              </List.Item>
              <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </List>
          </JumboTabs.Tab>
          <JumboTabs.Tab
            title="粉丝"
            key="fans"
            description={
              currentKey == "ironFan" && (
                <div className="titlePinkLine relative w-full"></div>
              )
            }
            destroyOnClose={true}
          >
            <div
              className={`flex flex-col items-center mt-20`}
              style={{ height: `${scrollHeight}px` }}
            >
              <Empty type="nodata" />
            </div>
          </JumboTabs.Tab>
        </JumboTabs>
      </div>
    </div>
  );
}