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 ButtonMain from '@/components/buttons/ButtonMain'
import Taro from "@tarojs/taro";
import { TAvatarItem } from "@/service/storage";
import { editAgentAvatar } from "@/service/agent";
import { useAgentStore } from "@/store/agentStore";
interface IProps {
  prev: ()=>void
  pickedAvatar: TAvatarItem
}
export default React.memo(function Index({prev, pickedAvatar}:IProps) {
  const {agent, fetchAgent} = useAgentStore()
  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} />
            {/* <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>
          <ButtonMain className="flex-1" onClick={handleConfirm}>确定</ButtonMain>
        </View>
      </View>
    </View>
  );
});
