import { useEffect, useRef, useState } from "react";
import { Image, View, ScrollView, Video } from "@tarojs/components";

import { uploadAndNavToGenNewAvatar } from "@/utils/avatar";

import WemetaRadio from '@/components/WemetaRadio'
import { AvatarMedia } from "@/components/AvatarMedia";
import WemetaButton from '@/components/buttons/WemetaButton'
import IconCrop from '@/components/icon/IconCrop'
import Taro from "@tarojs/taro";
import style from "./index.module.less";
import { cropImage } from "@/utils/upload";
import { TAvatarItem } from "@/service/storage";
interface IProps {
  avatarItem: TAvatarItem,
  enabledChatBg: boolean,
  setEnabledChatBg: (enabled: boolean) => void
  onCropDone: (url: string) => void
  onChange: () => void
  onConfirm: (edit: TAvatarItem & {enabledChatBg: boolean}) => void
}

export default function Index({ avatarItem, enabledChatBg, setEnabledChatBg, onCropDone, onChange, onConfirm }: IProps) {
  const [avatarData, setAvatarData] = useState({...avatarItem, enabledChatBg})
  const handleConfirm = async () => {
    console.log('confirm')
    onConfirm({ ...avatarData,  enabledChatBg})
  }
  const handleChange = () => {
    onChange()
  }
  const handleCrop = () => {

    Taro.showLoading()
    // url: `${avatarItem.avatarLogo}?x-oss-process=image/resize,w_450/quality,q_60`,
    Taro.downloadFile({
      url: avatarItem.avatarLogo,
      success: async (res) => {
        if (res.statusCode === 200) {
          const cropRes = await cropImage(res.tempFilePath)
          if(cropRes?.url){
            onCropDone(cropRes.url)
            setAvatarData({...avatarData, avatarLogo: cropRes.url})
          }
        }
      },
      fail: (err) => {
        console.log(err);
        Taro.hideLoading()
        Taro.showToast({
          title: '头像下载失败',
          icon: 'error',
          duration: 2000
        })
      },
      complete: (err) => {
        console.log(err);
        Taro.hideLoading()
      }
    })
  }

  const handleEnabledChatBg = ()=> {
    setEnabledChatBg(!enabledChatBg)
  }

  return (
    <View>
      <View>
        <View className={style.confirmContainer}>
          <View className={style.confirmRoundedAvatarWrap}>
            <Image
              mode='aspectFill'
              className={style.confirmRoundedAvatar}
              src={avatarData?.avatarLogo}
            ></Image>
            <View className={style.cropButton} onClick={handleCrop}>
              <IconCrop />
            </View>
          </View>
          <View className={style.confirmChatAvatarBg}>
            <View className={style.confirmChatAvatarImage}>
              <AvatarMedia roundedFull={false} source={avatarData?.avatarUrl} className={style.confirmChatAvatarImage} />
              {!avatarItem.isOriginal && <View className={style.aiTips}>图片由AI生成</View>}
              {/* <Image
                mode="widthFix"
                className="w-full"
                src={pickedAvatar.avatarUrl}
              ></Image> */}
            </View>
            {enabledChatBg && <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={handleEnabledChatBg}>
            <WemetaRadio checked={enabledChatBg} checkbox></WemetaRadio>
            启用聊天背景
          </View>
        </View>

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