import { View, Image } from "@tarojs/components";
import React, { useState } from "react";
import style from "./index.module.less";
import WemetaRadio from '@/components/WemetaRadio'
import { AvatarMedia } from "@/components/AvatarMedia";
import WemetaButton from '@/components/buttons/WemetaButton'
import Taro from "@tarojs/taro";
import { TAvatarItem } from "@/service/storage";
// import { editAgentAvatar } from "@/service/agent";
import { useAgentStore, useAgentStoreActions } from "@/store/agentStore";
interface IProps {
  prev: ()=>void
  pickedAvatar: TAvatarItem
}
export default React.memo(function Index({prev, pickedAvatar}:IProps) {
  const agent = useAgentStore((state) => state.agent);
  const {fetchAgent} = useAgentStoreActions();
  const [enabledChatBg, setEnabledChatBg] = useState(true)

  const handleConfirm = async () => {
    if(!agent?.agentId){
      return
    }
    // await editAgentAvatar(
    //   agent.agentId,
    //   pickedAvatar.avatarId,
    //   enabledChatBg,
    // );
    await fetchAgent(agent.agentId)

    Taro.redirectTo({url: '/pages/agent/index'})
  }
  return (
    <View>
      <View className={style.confirmContainer}>
        <View className={style.confirmRoundedAvatarWrap}>
          <Image
            mode='aspectFill'
            className={style.confirmRoundedAvatar}
            src={pickedAvatar?.avatarLogo}
          ></Image>
        </View>
        <View className={style.confirmChatAvatarBg}>
          <View className={style.confirmChatAvatarImage}>
            <AvatarMedia roundedFull={false}  source={pickedAvatar?.avatarUrl} className={style.confirmChatAvatarImage} />
            {!pickedAvatar.isOriginal && <View className={style.aiTips}>图片由AI生成</View> }
            {/* <Image
              mode="widthFix"
              className="w-full"
              src={pickedAvatar.avatarUrl}
            ></Image> */}
          </View>
          <View className={style.confirmChatAvatarBgCover}>
              <View className={style.block1}></View>
              <View className={style.block2}></View>
              <View className={style.block3}></View>
          </View>
        </View>
        <View className="flex-center gap-8 text-14 font-medium leading-22 text-black" onClick={()=> setEnabledChatBg((prev)=> !prev)}>
          <WemetaRadio checked={enabledChatBg} checkbox></WemetaRadio>
          启用聊天背景
        </View>
      </View>

      <View className="bottom-bar">
        <View className="grid grid-cols-2 gap-8 px-20 py-12">
          <View className={`button-rounded`} onClick={prev}>更换形象</View>
          <WemetaButton className="flex-1" onClick={handleConfirm}>确定</WemetaButton>
        </View>
      </View>
    </View>
  );
});