import { View } from "@tarojs/components";
import { Gift, Home, User } from "@nutui/icons-react-taro";
import { navigateTo, redirectTo, getStorageSync } from "@tarojs/taro";
import PostList from "../../components/post-list";

import "./index.scss";
import {
  Image,
  NoticeBar,
  Tabbar,
  TabPane,
  Tabs,
} from "@nutui/nutui-react-taro";
import { useEffect, useRef, useState } from "react";
import { getCircleInfoApi } from "../../api/circle";
import GameIntro from "../../components/game-intro";

function Index() {
  const [circleData, setCircleData] = useState<any>(null);
  const [tab1value, setTab1value] = useState<string | number>("1");
  const containerTopRef = useRef<HTMLDivElement>(null);
  const [vipUserInfo, setVipUserInfo] = useState<any>(null);
  useEffect(() => {
    getCircleInfoApi({ id: 1 }).then((res: any) => {
      setCircleData(res.data);
    });
    setVipUserInfo(getStorageSync("vipInfo"));
  }, []);

  return (
    <View ref={containerTopRef} className="index">
      {/* 头部导航栏 - 移出page-content容器 */}
      <View
        className="index-header bg-[#6069d9] fixed top-0 left-0 right-0 z-20 h-[70px] w-full px-[10px]"
        style={{
          backgroundImage: `url(${circleData?.icon_url})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat",
        }}
      >
        <View className="flex items-center justify-between">
          <View className="flex items-center relative z-40 py-[10px]">
            <View className="w-[45px] h-[45px] bg-[#fff] rounded-[50%] overflow-hidden">
              <Image
                src={circleData?.icon_url}
                width="100%"
                height="100%"
                mode="aspectFill"
              />
            </View>
            <View>
              <View className="text-[16px] font-[800] text-[#fff] ml-[10px]">
                {circleData?.name}
              </View>
              <View className="text-[12px] text-[#ccc] ml-[10px]">
                3400人在线
              </View>
            </View>
          </View>
          <View className="flex items-center">
            {/* <View
              onClick={() => {
                navigateTo({ url: "/pages/self/index" });
              }}
            >
              <User size={22} />
            </View> */}
          </View>
        </View>
      </View>

      {/* 页面内容 - 使用ScrollView控制整个页面滚动 */}

      <View className="page-content">
        {vipUserInfo && (
          <View className="flex items-center justify-around w-[100%]">
            <View
              className="text-[#fff] w-[28%] h-[30px] flex items-center justify-center text-center text-[12px]  rounded-[5px] font-[800] px-[10px] bg-[#5258acf0] "
              onClick={() => {
                navigateTo({ url: "/pages/act/index" });
              }}
            >
              积分中心
            </View>
            <View
              className="text-[#fff] w-[28%] h-[30px] flex items-center justify-center text-center text-[12px] rounded-[5px]  font-[800] px-[10px] bg-[#5258acf0]"
              onClick={() => {
                navigateTo({ url: "/pages/gift/index" });
              }}
            >
              <Gift size={16} />
              礼包中心
            </View>
            {/* <View
            className="text-[#fff] w-[28%] h-[30px] flex items-center justify-center text-center text-[12px] rounded-[5px]  font-[800] px-[10px] bg-[#5258acf0]"
            onClick={() => {
              navigateTo({ url: "/pages/publish/index" });
            }}
          >
            <Plus size={20} />
            发布帖子
          </View> */}
          </View>
        )}
        {vipUserInfo?.notice && <NoticeBar content={vipUserInfo.notice} />}
        <View
          style={{
            height: vipUserInfo ? "calc(100vh - 180px)" : "calc(100vh - 100px)",
          }}
        >
          <Tabs
            align="left"
            autoHeight
            value={tab1value}
            onChange={(value) => {
              setTab1value(value);
            }}
          >
            {vipUserInfo?.download_list && (
              <TabPane title="游戏介绍" value="0">
                <GameIntro
                  style={{
                    height: vipUserInfo
                      ? "calc(100vh - 260px)"
                      : "calc(100vh - 180px)",
                  }}
                  vipUserInfo={vipUserInfo}
                />
              </TabPane>
            )}

            <TabPane title="官方咨讯" value="1">
              <PostList
                style={{
                  height: vipUserInfo
                    ? "calc(100vh - 260px)"
                    : "calc(100vh - 180px)",
                }}
              />
            </TabPane>
          </Tabs>
        </View>
        <View className="bg-[#fff] fixed bottom-[0px] left-[0px] right-[0px] w-full">
          <Tabbar
            defaultValue={0}
            onSwitch={(value) => {
              if (value === 1) {
                redirectTo({ url: "/pages/self/index" });
              } else {
                redirectTo({ url: "/pages/index/index" });
              }
            }}
          >
            <Tabbar.Item title="首页" icon={<Home width={20} height={20} />} />
            <Tabbar.Item title="我的" icon={<User width={20} height={20} />} />
          </Tabbar>
        </View>
      </View>
    </View>
  );
}

export default Index;