import { View,Text, Image } from "@tarojs/components";
import React, { useState, useCallback, useEffect } from "react";
import style from './index.module.less'
import IconChange from "@/components/icon/icon-change";
import IconStar from "@/components/icon/icon-star";
import WemetaTextarea from "@/components/wemeta-textarea/index";
import Taro, { useRouter } from "@tarojs/taro";
import { uploadAvatar } from '@/service/storage'
import { isSuccess } from "@/utils";
interface IProps {
  next: () =>void
  setTaskId: (value:any)=> void 
}

export default React.memo(function StepStart({ next, setTaskId }: IProps) {
  
  const router = useRouter();
  const { avatarUrl } = router.params
  const uploadedAvatarUrl = decodeURIComponent(avatarUrl ?? '')
  const [value, setValue] = useState("职场精英，频频点头微笑，且桀骜不驯");
  
  console.log('StepStart render', { value });

  useEffect(() => {
    console.log('StepStart mounted/updated');
  });

  const handleInput = useCallback((value: string) => {
    setValue(value);
  }, []);

  const handleClick = useCallback(async () => {
    if(!uploadedAvatarUrl){
      return
    }
    
    Taro.showLoading();
    const response = await uploadAvatar({
      aiGenerated: true,
      avatarUrl: uploadedAvatarUrl,
      description: value,
    })
    Taro.hideLoading();
    console.log(response,1111)
    if(isSuccess(response.status)){
      setTaskId(response.data.taskId)
      next();
    }
  }, [next]);

  return (
    <View>
      <View className={style.startContainer}>
        <View className={style.startCard}>
          <View className={style.startIconChange}>
            <IconChange />
          </View>
          <Image className={style.startCard} src={uploadedAvatarUrl} mode="widthFix"></Image>
        </View>
      </View>
      <View className="mb-24">
        <View className="text-14 font-medium text-black mb-10">创意描述<Text className="text-12 text-gray-45">(非必填)</Text></View>
        <WemetaTextarea
          value={value}
          onInput={handleInput}
          placeholder="描述你想要生成的画面和动作。例如：职场精英在点头微笑"
        />
      </View>
      <View className="bottom-bar">
        <View className="px-20 py-12">
          <View className={`button-rounded-big gap-4 ${style.startGenButton}`} onClick={handleClick}>
            <IconStar />
            <View>生成微视频</View>
          </View>
        </View>
      </View>
    </View>
  );
});