"use client";

import React, { useState, useEffect, useRef } from "react";
import Empty from "@/components/Empty";
import requireAPI from "@/utils/requireAPI";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import { InfiniteScroll, Avatar, Divider } from "antd-mobile";
import { useRouter } from "next/navigation";
import InfiniteScrollContent from "@/components/InfiniteScrollContent";
import AddWeChat from "@/components/AddWeChat";
export default function UnlockedWechat() {
  const router = useRouter();
  //查询数据
  const [data, setData] = useState([]);
  const [offset, setOffset] = useState(0);
  const [hasMore, setHasMore] = useState(1);
  const [visible, setVisible] = useState(false);
  const currentStreamer = useRef({});
  useEffect(() => {
    getData();
  }, []);

  const getData = async (currentOffset) => {
    if (!hasMore) return;
    try {
      //查已解锁微信的主播的mid
      const temData = await requireAPI("POST", "/api/vas/get_unlock_wechat_list", {
        body: {
          offset: currentOffset,
          limit: 12,
        },
      });
      setData([...data, ...temData.data.list]);
      setOffset(temData.data.offset);
      setHasMore(temData.data.more);
    } catch (error) {
      console.error(error);
    }
  };
  async function loadMore() {
    if (!offset) return;
    const append = await getData(streamerInfo.id, currentKey, offset);
    if (append) {
      setData((val) => [...val, ...append]);
    }
  }
  return (
    <div>
      <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="mt-14">
        <ul className="p-4 overflow-y-auto scrollbarBox_hidden">
          {data.map((item, index) => (
            <li key={item.id + "_" + index}>
              <div className="flex items-center">
                <Avatar
                  className="w-12 h-12 rounded-full"
                  src={item.account?.avatar?.images[0]?.urls[0]}
                  fit="cover"
                  onClick={()=>router.push("/profile/"+item?.account?.mid)}
                />
                <div className="ml-2 justify-around flex-1">
                  <p className="text-base text-white font-medium">
                    {item.account.name}
                  </p>
                  <p className="text-sm text-[#FFFFFF80] font-medium">
                    {item.streamer.bio}
                  </p>
                </div>
                <div className="ml-2 justify-around items-center">
                  <div
                    className="text-sm font-medium px-3 py-1 bg-primary leading-[24px] rounded-full"
                    onClick={() => {
                      currentStreamer.current = item;
                      setVisible(true);
                    }}
                  >
                    查看微信
                  </div>
                </div>
              </div>
              <Divider className="my-3" />
            </li>
          ))}
          <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
            <InfiniteScrollContent hasMore={hasMore} />
          </InfiniteScroll>
        </ul>
      </div>
      <AddWeChat
        visible={visible}
        closeMask={setVisible}
        price={currentStreamer.current?.streamer?.wechat_coin_price}
        name={currentStreamer.current?.account?.name}
        streamerMid={currentStreamer.current?.streamer?.mid}
        avatar={currentStreamer.current?.account?.avatar?.images[0]?.urls[0]}
        streamerData={{
          streamer_ext: {
            wechat_lock_type:
              currentStreamer.current?.streamer?.wechat_lock_type,
          },
        }}
      />
    </div>
  );
}