"use client";

import React, { useEffect, useRef, useState } from "react";
import { Tabs, Swiper, Toast, Dialog } from "antd-mobile";
import Link from "next/link";
import requireAPI from "@/utils/requireAPI";
import MessageList from "./components/MessageList";
import { get } from "@/utils/storeInfo";
import OwnIcon from "@/components/OwnIcon";
const tabItems = [{ key: "space", title: "消息" }];
// const scrollHeight = 700;
// const scrollHeight = window.innerHeight-126
export default function Space() {
  const [activeIndex, setActiveIndex] = useState(0);
  const [dataList, setDataList] = useState([]);
  // const [spacePost, setSpacePost] = useState([]);
  // const [hasMore, setHasMore] = useState(1);
  // const [scrollHeight, setScrollHeight] = useState(0);
  const [offset, setOffset] = useState(0);
  const mesListEl = useRef(null);
  const [account, setAccount] = useState(null);
  // 获取屏幕高度
  // const scrollHeight = 600;
  useEffect(() => {
    setAccount(get("account"));
    // setScrollHeight(window.innerHeight - 57 - 44);
    // const handleResize = () => {
    //   setScrollHeight(window.innerHeight - 126);
    // };
    // window.addEventListener("resize", handleResize);
    // return () => {
    //   // window.removeEventListener("resize", handleResize);
    // };
  }, []);
  useEffect(() => {
    firstRequest();
  }, [activeIndex]);
  const firstRequest = () => {
    resetOffset();
    if (activeIndex === 0) {
      getSpaceList();
    }
    if (activeIndex === 1) {
      getSpacePosts(0).then((res) => {
        res && setDataList(res);
      });
    }
  };
  const resetOffset = () => {
    setOffset(0);
    // setDataList([]);
  };
  const getSpaceList = async () => {
    // setLoading(true);
    try {
      const data = await requireAPI("POST", "/api/zone/list_by_visitor_mid");
      // setLoading(false);
      if (data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: data.msg,
          position: "top",
        });
        return;
      }
      //在末尾添加元素以展示查看更多卡片
      if (data.data.list.length !== 0) {
        const finalData = [...data.data.list];
        setDataList(finalData);
        return;
      }
    } catch (error) {
      // console.error(error);
    }
  };
  const getSpacePosts = async (offset) => {
    // setLoading(true);
    try {
      const data = await requireAPI(
        "POST",
        "/api/zone_moment/list_by_visitor_mid",
        {
          body: { offset, limit: 4 },
        }
      );
      // setLoading(false);
      if (data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: data.msg,
          position: "top",
        });
        return;
      }
      //在末尾添加元素以展示查看更多卡片
      // setHasMore(data.data.more);
      setOffset(data.data.offset);
      if (data.data.list.length !== 0) {
        const finalData = [...data.data.list];
        return finalData;
      }
    } catch (error) {
      // console.error(error);
    }
  };
  async function loadMore() {
    if (!offset) return;
    const append = await getSpacePosts(offset);
    if (append) {
      setDataList((val) => [...val, ...append]);
      // setHasMore(append.length > 0);
    }
  }
  const handleReadAll = () => {
    const showMobal = Dialog.show({
      title: "提示",
      content: <div className="text-center">是否确认清除所有未读消息？</div>,
      bodyStyle: {
        maxHeight: "none",
        width: "80vw",
        position: "fixed",
        top: "200px",
        left: "10vw",
        "--text-color": "#fff",
        color: "#fff",
      },
      // cancelText:"确认",
      // confirmText:"取消",
      style: {
        "--text-color": "#fff",
      },
      closeOnAction: true,
      actions: [
        [
          {
            key: "close",
            text: "取消",
            bold: true,
            style: { color: "#ffffff80" },
            onClick: () => {
              showMobal?.close();
            },
          },
          {
            key: "submit",
            text: "确认",
            style: { color: "#fff" },
            onClick: () => {
              if (mesListEl.current) mesListEl.current.readAllMsg([0, 1, 2, 3]);
            },
          },
        ],
      ],
    });
  };

  return (
    <div className="">
      <div className="flex justify-between items-center px-2 custom-tabs text-gray-400 sticky top-0 z-10 bg-deepBg">
        <Tabs
          activeKey={tabItems[activeIndex].key}
          onChange={(key) => {
            const index = tabItems.findIndex((item) => item.key === key);
            setActiveIndex(index);
            // swiperRef.current?.swipeTo(index);
          }}
        >
          {tabItems.map((item) => (
            <Tabs.Tab
              forceRender={false}
              title={item.title}
              key={item.key}
              className="text-left"
            />
          ))}
        </Tabs>
        <div className="flex space-x-4 mt-1">
          <Link
            href="search"
            className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full"
          >
            <OwnIcon src="/icons/search.png" className="scale-90" />
          </Link>
          <div
            className="w-10 h-10 flex items-center justify-center rounded-full"
            onClick={handleReadAll}
          >
            <OwnIcon
              src="/icons/32DP/remove.png"
              className="w-full h-full -mt-1 -ml-1"
            />
          </div>
        </div>
      </div>
      <Swiper
        direction="horizontal"
        indicator={() => null}
        // ref={swiperRef}
        defaultIndex={activeIndex}
        onIndexChange={(index) => {
          setActiveIndex(index);
        }}
      >
        <Swiper.Item>
          <MessageList ref={mesListEl} mid={account?.mid} />
        </Swiper.Item>
      </Swiper>
    </div>
  );
}