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

import "./index.scss";
import { Image } from "@nutui/nutui-react-taro";
import { useEffect, useState } from "react";
import { getCircleInfoApi } from "../../api/circle";
import config from "../../config";

function Index() {
  const [circleData, setCircleData] = useState<any>(null);
  const [userInfo, setUserInfo] = useState<any>(null);
  const getUserInfo = () => {
    const userInfo = getStorageSync("User");
    setUserInfo(userInfo);
  };
  useEffect(() => {
    getCircleInfoApi({ id: 1 }).then((res: any) => {
      setCircleData(res.data);
    });
    getUserInfo();
  }, []);
  return (
    <View className="index">
      <View
        className="index-header fixed top-0 left-0 right-0 z-20 h-[60px] w-full flex items-center justify-between px-[10px]"
        style={{ backgroundImage: `url(${circleData?.icon_url})` }}
      >
        <View className="flex items-center relative z-40">
          <View className="w-[50px] h-[50px] bg-[#fff] rounded-[10px] overflow-hidden">
            <Image
              src={circleData?.icon_url}
              width="100%"
              height="100%"
              mode="aspectFill"
            />
          </View>
          <Text className="text-[16px] font-[800] text-[#fff] ml-[10px]">
            {circleData?.name}
          </Text>
        </View>
        {/* <View
          className="flex items-center relative z-40"
          onClick={() => {
            navigateTo({ url: "/pages/self/index" });
          }}
        >
          <User size={24} />
        </View> */}
      </View>

      <View className="index-content absolute top-[60px] left-0 right-0 bottom-0 z-20 rounded-[30px] overflow-hidden">
        <View className="h-25 p-[10px] flex ">
          {userInfo?.is_vip ? (
            <>
              <View
                className="w-[22%] pt-[10px] mr-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0] rounded-[5px] shadow-[0_15px_10px_-16px_rgba(0,0,0,0.3)]"
                onClick={() => {
                  // window.location.href = `${config.TARO_ACT_HOST}/jifen/exchange?vip_code=${userInfo?.vip_code}`;
                  navigateTo({ url: "/pages/act/index" });
                }}
              >
                <View className="text-[14px] font-[800] text-[#333]">
                  福利中心
                </View>
                <View className="text-[12px] text-[#949494]">登录领奖</View>
              </View>
            </>
          ) : (
            <></>
          )}

          {/* <View className="w-[22%] pt-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0]  rounded-[5px] shadow-[0_15px_10px_-16px_rgba(0,0,0,0.3)]">
            <View className="text-[14px] font-[800] text-[#333]">游戏攻略</View>
            <View className="text-[12px] text-[#949494]">最新资讯</View>
          </View>
          <View className="w-[22%] pt-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0]  rounded-[5px] shadow-[0_15px_10px_-16px_rgba(0,0,0,0.3)]">
            <View className="text-[14px] font-[800] text-[#333]">组队开黑</View>
            <View className="text-[12px] text-[#949494]">寻找队友</View>
          </View> */}
          <View
            className="w-[22%] pt-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0]  rounded-[5px] shadow-[0_15px_10px_-16px_rgba(0,0,0,0.3)]"
            onClick={() => {
              navigateTo({ url: "/pages/self/index" });
            }}
          >
            <View className="text-[14px] font-[800] text-[#333]">个人中心</View>
            <View className="text-[12px] text-[#949494]">我的信息</View>
          </View>
        </View>

        <PostList />
        {/* <TabbarCom /> */}
        <View
          className="fixed bottom-[50px] right-[20px] w-[50px] h-[50px] bg-[#6069d9] rounded-[50%] z-10 justify-center items-center flex "
          onClick={() => {
            navigateTo({ url: "/pages/publish/index" });
          }}
        >
          <Plus color="#fff" size={50} style={{ marginLeft: "-2px" }} />
        </View>
      </View>
    </View>
  );
}

export default Index;