"use client";

import React, { useState, useEffect } from "react";
import { List, InfiniteScroll, Toast } from "antd-mobile";
import { useRouter } from "next/navigation";
import requireAPI from "@/utils/requireAPI";
import Empty from "@/components/Empty";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import PostItem from "@/components/PostItem";

export default function StreamerPosts({ id }) {
  //获取当前时间
  const [currentTime, setCurrentTime] = useState();
  const getCurrentTime = async () => {
    setCurrentTime(Math.floor(new Date().getTime() / 1000));
  };

  //获取截止当前时间的动态数据
  const [data, setData] = useState([]);
  const [offset, setOffset] = useState(0);
  const [more, setMore] = useState(1);
  const router = useRouter();
  const getData = async (type) => {
    if (!currentTime) return;

    //防止重复加载
    // if (data.length === 0 && type === "bottom") return;
    // if (type === "bottom" && offset === 0) return;

    // if (!more) return;
    try {
      const body = {
        mid: id,
        ct_upper_bound: currentTime,
        offset: offset,
        limit: 4,
      };
      const _data = await requireAPI("POST", "/api/moment/list_by_mid", {
        body,
      });
      if (_data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: _data.msg,
          position: 60,
        });
        return;
      }
      setData((prev) => [...prev, ..._data.data.list]);
      setOffset(_data.data.offset);
      setMore(_data.data.more);
    } catch (error) {
      console.error(error);
    }
  };

  //查看是否需要blur并获取当前时间和会员价格
  useEffect(() => {
    getCurrentTime();
  }, []);

  // //当时间改变，获取新数据
  // useEffect(() => {
  //   getData("top");
  // }, [currentTime]);
  return (
    <div>
      {/* 头部标题 */}
      <div className="p-4 fixed top-0 z-10 w-full bg-black">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
            style={{ maxWidth: "12px" }}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">动态</p>
      </div>
      {/* 内容 */}
      <div className="pt-16 p-4">
        {data.length == 0 && (
          <div className="mt-32">
            <Empty type="nodata" />
          </div>
        )}
        <List style={{ "--padding-left": 0 }}>
          {data?.map((item, index) => (
            <List.Item key={index}>
              {/* <RenderItem item={item} /> */}
              <PostItem data={item} />
            </List.Item>
          ))}
        </List>
        <InfiniteScroll loadMore={getData} hasMore={more}>
          {null}
        </InfiniteScroll>
      </div>
    </div>
  );
}