import { NavBar, Picker, Popup } from "@nutui/nutui-react-taro";
import { Text, View } from "@tarojs/components";
import { ArrowLeft } from "@nutui/icons-react-taro";
import { getStorageSync, navigateBack, showToast } from "@tarojs/taro";
import {
  getVipCustomersGiftListApi,
  receiveVipCustomersGiftApi,
} from "../../api/gift";
import { useEffect, useState } from "react";
import { getVipUserRoleListApi } from "../../api/user";

const Gift = () => {
  const [giftList, setGiftList] = useState<any>([]);
  const [roleList, setRoleList] = useState<any>([]);
  const [roleInfo, setRoleInfo] = useState<any>(null);
  const [showRolePopup, setShowRolePopup] = useState(false);

  const getGiftList = async () => {
    // 圈子id 从本地存储中获取
    const mainId = getStorageSync("circleInfo").main_id;
    if (!mainId) {
      return;
    }

    const res: any = await getVipCustomersGiftListApi({
      main_id: mainId,
      user_name: getStorageSync("vipInfo").user_name,
      role_id: roleInfo?.role_id,
    });
    if (res.code === 200) {
      setGiftList(res.data);
    }
  };

  const getGift = async (item) => {
    const res: any = await receiveVipCustomersGiftApi({
      ...item,
      role_id: roleInfo?.role_id,
    });
    if (res.code === 200) {
      const data = [...giftList];
      data.forEach((ite: any) => {
        if (ite.id === item.id) {
          ite.is_received = true;
        }
      });
      setGiftList(data);
      showToast({
        title: "领取成功",
        icon: "success",
      });
    }
  };

  // 请求角色列表
  const getRoleList = async () => {
    const res: any = await getVipUserRoleListApi({});
    if (res.code === 200) {
      if (res.data.length) {
        res.data.map((item) => {
          item.text = item.role_name;
          item.value = item.role_id;
        });
        setRoleList(res.data);
      }
      setRoleInfo(res.data[0]);
    }
  };

  useEffect(() => {
    getRoleList();
  }, []);
  useEffect(() => {
    if (roleInfo?.role_id) {
      getGiftList();
    }
  }, [roleInfo]);
  return (
    <View>
      <NavBar
        back={
          <>
            <ArrowLeft />
            返回
          </>
        }
        fixed
        onBackClick={(e) => {
          e.preventDefault();
          navigateBack({ delta: 1 });
        }}
      >
        礼包中心
      </NavBar>
      <View className="pt-[40px] bg-[#181f36] h-[100vh]">
        <View className="text-center pt-[10px]">
          <View className="text-[20px] text-[#f8cf6a] font-[800]">
            豪华游戏礼包
          </View>
          <View className="text-[#a5b1c2] text-[14px]">
            选择角色并领取您的专属礼包
          </View>
        </View>
        <View className="mt-[10px] bg-[#303549] rounded-[10px] p-[10px] w-[90%] mx-auto">
          <View className="cursor-pointer  h-[40px] line-height-[40px] text-[#fff] flex items-center justify-between text-[14px]">
            <View>
              当前角色：
              <Text className="text-[#ffce54] font-[800]">
                {roleInfo?.role_name}
              </Text>
            </View>
            <View
              onClick={() => {
                setShowRolePopup(true);
              }}
            >
              切换角色
            </View>
          </View>
        </View>

        {giftList.length === 0 && (
          <View className="text-[#999] text-[14px] text-center mt-[20px]">
            暂无礼包
          </View>
        )}
        {giftList.length > 0 &&
          giftList.map((item: any) => (
            <View className="bg-linear-to-r from-[#4a00e0] to-[#8e2de2] rounded-[10px] p-[20px] mt-[20px] w-[90%] mx-auto">
              <View className="text-[14px]">
                <View className="text-[#ffce54] font-[800] text-[20px] mt-[10px] text-center">
                  {item.gift_name}
                </View>
                <View className="text-[16px] text-[#999] bg-[#00000030] rounded-[10px] p-[20px] my-[20px]">
                  {item.gift_desc.split("、").map((item: any) => (
                    <View className="flex items-center justify-between py-[15px] border-b-[1px] border-[#ffffff30] last:border-b-0">
                      <View className="text-[16px] text-[#fff] font-[800]">
                        {item.split("*")[0]}
                      </View>
                      <View className="text-[16px] text-[#ffce54] font-[800]">
                        x {item.split("*")[1]}
                      </View>
                    </View>
                  ))}
                </View>
                <View
                  className={`font-[800] text-center py-[15px] px-[40px] rounded-[50px] text-[18px] w-[200px] mx-auto ${
                    item.is_received
                      ? "text-[#999] bg-[#f2f2f2]"
                      : "text-[#2c3e50] bg-linear-to-r from-[#ffce54] to-[#ff9f43] "
                  }`}
                  onClick={() => {
                    if (item.is_received) {
                      return;
                    }
                    getGift(item);
                  }}
                >
                  {item.is_received ? "已领取" : "领取"}
                </View>
              </View>
            </View>
          ))}
      </View>
      <Picker
        title="请选择角色"
        visible={showRolePopup}
        options={roleList}
        onConfirm={(data) => {
          setRoleInfo(data[0]);
          setShowRolePopup(false);
        }}
        onClose={() => {
          setShowRolePopup(false);
        }}
      ></Picker>
    </View>
  );
};

export default Gift;
