import { View, Image } from "@tarojs/components";
import React, { useState } from "react";
import Taro, { nextTick } from "@tarojs/taro";
import { TAvatarItem } from "@/service/storage";
import AvatarConfirm from '@/components/AvatarConfirm/index'
import { useAgentStore, useAgentStoreActions } from "@/store/agentStore";
interface IProps {
  prev: ()=>void
  pickedAvatar: TAvatarItem
}
export default React.memo(function Index({prev, pickedAvatar}:IProps) {
  const currentItem = { ...(pickedAvatar || {}) }
  const agentEdit = useAgentStore((state) => state.agentEdit);
  const { saveAgent, updateEditAgent} = useAgentStoreActions();
  const [enabledChatBg, setEnabledChatBg] = useState(true)

  const handleConfirm = async (edit: TAvatarItem & { enabledChatBg: boolean }) => {
    if (edit.avatarLogo && edit.avatarUrl) {
      updateEditAgent({...edit})
      // 如果是编辑，直接编辑形象成功
      if(agentEdit?.agentId){
        nextTick(()=> {
          saveAgent()
          Taro.showToast({title: '形象设置成功', icon: 'success'})
          setTimeout(()=> {
            Taro.navigateBack()
          }, 2000)
        })
        return
      }
      // 如果是新建智能体，只是暂时设置并不更新至服务器
      Taro.showToast({title: '形象设置成功', icon: 'success'})
      setTimeout(()=> {
        Taro.navigateBack()
      }, 2000)
    }




  }
  const handleChange = () => {
    prev()
  }

  const handleCropDone = (url: string) => {
    console.log('handleCropDone', url)
    if(url){
      currentItem.avatarLogo = url
      updateEditAgent({avatarLogo: url})
    }
  }
  return (
    <>
    {!!currentItem && <AvatarConfirm
      avatarItem={currentItem}
      enabledChatBg={enabledChatBg}
      setEnabledChatBg={setEnabledChatBg}
      onCropDone={handleCropDone}
      onChange={handleChange}
      onConfirm={handleConfirm} />}
  </>
  )
  // 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>
  // );
});