import { Image, View } from "@tarojs/components";
import style from "./index.module.less";
import IconPlusBig from "@/components/icon/icon-plus-big";
import Taro from "@tarojs/taro";
import { uploadAndNavToGenNewAvatar } from "@/utils/avatar";
import WemetaRadio from "@/components/WemetaRadio";
import { useAgentStore, useAgentStoreActions } from "@/store/agentStore";

import { isSuccess } from "@/utils";
import { fetchMyAvatars } from "@/service/storage";
import { AvatarMedia } from "@/components/AvatarMedia";

export default () => {
  const agentEdit = useAgentStore((state) => state.agentEdit);
  const { saveAgent, updateEditAgent } = useAgentStoreActions();

  const handleChange = async (isChecked: boolean) => {
    if (!agentEdit?.agentId ) {
      // 如果是新建，只是改变状态，不保存至服务器
      updateEditAgent({ enabledChatBg: isChecked })
      return;
    }
    Taro.showLoading()
    try{
      const agent = await saveAgent({enabledChatBg: isChecked});
      Taro.hideLoading()
      if (agent) {
        Taro.showToast({
          title: isChecked ? "启用成功" : "取消启用",
          icon: "success",
        });
      }
    }catch(e){
      Taro.hideLoading()
    }

  };
  const handleClick = async () => {
    const response = await fetchMyAvatars({ pageIndex: 1, pageSize: 2 });
    if (isSuccess(response.status)) {
      if (response.data.data.length > 0) {
        Taro.navigateTo({ url: "/pages/agent-avatars/index" });
        return;
      }
    }
    if (agentEdit?.avatarUrl) {
      return;
    }
    uploadAndNavToGenNewAvatar();
  };

  const handleChangeAvatar = async (e: any) => {
    e.stopPropagation();
    Taro.navigateTo({ url: "/pages/agent-avatars/index" });
  };

  const renderContent = () => {

    if (!agentEdit?.avatarUrl) {
      return (
        <View className={style.tips}>
          <View className={style.icon}>
            <IconPlusBig></IconPlusBig>
          </View>
          <View className={style.tipsText}>形象照</View>
        </View>
      );
    }

    return (
      <View className="relative overflow-hidden w-full h-full">
        <AvatarMedia mode="aspectFill" source={agentEdit.avatarUrl} className={style.card} lazyLoad={false} />
        {agentEdit?.avatarUrl &&  <View className={style.confirmChatAvatarBgCover}>
          <View className={style.block1}></View>
          <View className={style.block2}></View>
          <View className={style.block3}></View>
        </View>}
        <View className={style.changeButton} onClick={handleChangeAvatar}>
          更换形象
        </View>
      </View>
    );
  };

  const renderFooter = ()=> {
    if(agentEdit?.avatarUrl){
      return <View
        className="w-full flex-center pt-16 gap-6"
        onClick={() => handleChange(!!!agentEdit?.enabledChatBg)}
      >
        <WemetaRadio checkbox checked={agentEdit?.enabledChatBg}></WemetaRadio>
        <View className="font-medium text-14 text-black">启用聊天背景</View>
      </View>
    }
    return <View className="pt-16 font-medium text-14 text-gray-3 text-center">用于头像或聊天背景</View>
  }

  return (
    <View className={style.container}>
      <View className={style.cardContainer} onClick={handleClick}>
        {renderContent()}
      </View>

      {renderFooter()}
    </View>
  );
};
