import { Badge, Cell, NavBar } from "@nutui/nutui-react-taro";
import { ArrowLeft, ArrowRight } from "@nutui/icons-react-taro";
import { View } from "@tarojs/components";
import { useState } from "react";
import { getUnreadCountApi } from "../../api/notifications";
import { navigateTo, useDidShow, navigateBack } from "@tarojs/taro";

const Message = () => {
  const [unreadCount, setUnreadCount] = useState({
    1: 0,
    2: 0,
    3: 0,
    4: 0,
    5: 0,
    6: 0,
  });
  const getUnreadCount = async () => {
    const res: any = await getUnreadCountApi();
    if (res.code === 200) {
      setUnreadCount(res.data[0]);
    }
  };
  // useEffect(() => {
  //   getUnreadCount();
  // }, []);
  useDidShow(() => {
    getUnreadCount();
  });
  return (
    <>
      <NavBar
        back={
          <>
            <ArrowLeft />
            返回
          </>
        }
        onBackClick={(e) => {
          e.preventDefault();
          navigateBack({ delta: 1 });
        }}
      >
        消息
      </NavBar>
      <Cell
        onClick={() => {
          navigateTo({
            url: "/pages/message/list/index?type=like",
          });
        }}
        title={
          <>
            <Badge
              right="0"
              value={Number(unreadCount[4] || 0) + Number(unreadCount[5] || 0)}
            >
              获得赞
            </Badge>
          </>
        }
        extra={
          <View className="flex items-center">
            <ArrowRight />
          </View>
        }
      />
      <Cell
        onClick={() => {
          navigateTo({
            url: "/pages/message/list/index?type=comment",
          });
        }}
        title={
          <>
            <Badge
              right="0"
              value={
                Number(unreadCount[1] || 0) +
                Number(unreadCount[2] || 0) +
                Number(unreadCount[3] || 0)
              }
            >
              评论和@
            </Badge>
          </>
        }
        extra={<ArrowRight />}
      />
      <Cell
        onClick={() => {
          navigateTo({
            url: "/pages/message/list/index?type=follow",
          });
        }}
        title={
          <>
            <Badge
              right="0"
              value={Number(unreadCount[6] || 0) + Number(unreadCount[7] || 0)}
            >
              关注和分享
            </Badge>
          </>
        }
        extra={<ArrowRight />}
      />
    </>
  );
};

export default Message;
