import { NavBar, Picker, Popup } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import { ArrowLeft } from "@nutui/icons-react-taro";
import { getStorageSync, navigateBack } 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);
    }
  };

  // 请求角色列表
  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]">
        <View className="cursor-pointer bg-[#5d66a7] h-[40px] line-height-[40px] text-[#fff] flex items-center justify-between px-[10px] border-b-[1px] border-[#f2f2f2] text-[14px]">
          <View>{roleInfo?.role_name}</View>
          <View
            onClick={() => {
              setShowRolePopup(true);
            }}
          >
            切换角色
          </View>
        </View>
        {giftList.map((item: any) => (
          <View className="flex items-center justify-between px-[10px] border-b-[1px] border-[#f2f2f2] pb-[10px]">
            <View className="text-[14px]">
              <View>{item.gift_name}</View>
              <View className="text-[12px] text-[#999]">{item.gift_desc}</View>
            </View>

            <View
              className={`font-[800] text-center py-[4px] w-[60px] rounded-[10px] text-[14px] ${
                item.is_received
                  ? "text-[#999] bg-[#f2f2f2]"
                  : "text-[#fff] bg-[#5c64ac]"
              }`}
              onClick={() => {
                if (item.is_received) {
                  return;
                }
                getGift(item);
              }}
            >
              {item.is_received ? "已领取" : "领取"}
            </View>
          </View>
        ))}
      </View>
      <Picker
        title="请选择角色"
        visible={showRolePopup}
        options={roleList}
        onClose={() => {
          setShowRolePopup(false);
        }}
      ></Picker>
    </View>
  );
};

export default Gift;
