import NavBarNormal from "@/components/NavBarNormal/index";
import { View } from "@tarojs/components";
import PageCustom from "@/components/page-custom/index";
import { useState, useCallback, useEffect } from "react";
import StepStart from './components/step/StepStart'
import StepPick from "./components/step/StepPick";
import StepConfirm from "./components/step/StepConfirm";
import { TAvatarItem } from "@/service/storage";
import IconCloseBlack16 from '@/components/icon/IconCloseBlack16'
import Taro from "@tarojs/taro";

type TStep = 'start'|'pick'|'confirm'

//todo: 使用 store 实现一个状态机

export default function Index() {

  const [state, setState] = useState<TStep>('start')
  const [taskId, setTaskId] = useState<string>()
  const [pickedAvatar, setPickedAvatar] = useState<TAvatarItem>()
  const [avatars, setAvatars] = useState<TAvatarItem[]>([]);
  const [videos, setVideos] = useState<TAvatarItem[]>([]);

  const getClassName = useCallback((_state: TStep) => {
    return state === _state ? 'block': 'hidden'
  }, [state]);
  const handleStartNext = ()=> {
    setAvatars([])
    setVideos([])
    setState('pick')
  }
  const toStartStep = ()=> {
    setTaskId(undefined)
    setState('start')
  }

  const renderNavLeft = ()=> {
    return <View className="flex items-center" onClick={()=> Taro.navigateBack()}><IconCloseBlack16 /></View>
  }
  return (
    <PageCustom>
      <NavBarNormal leftColumn={renderNavLeft}>形象照</NavBarNormal>
      <View className="px-16 w-full flex flex-col gap-20">
        {/* 第一步开始 */}
        <View className={getClassName('start')}>
          <StepStart next={()=> handleStartNext()} setTaskId={setTaskId}/>
        </View>
        {/* 第二步 生成多个形象提供用户选择 */}
        <View className={getClassName('pick')}>
        {taskId &&  <StepPick
            taskId={taskId}
            setAvatars={setAvatars}
            avatars={avatars}
            videos={videos}
            setVideos={setVideos}
            setPickedAvatar={setPickedAvatar}
            prev={()=> toStartStep()}
            next={()=> setState('confirm')}
          />}
        </View>
        {/* 第三步 确认选择作为智能体的形象 */}
        <View className={getClassName('confirm')}>
        {pickedAvatar && <StepConfirm
            pickedAvatar={pickedAvatar}
            prev={()=> setState('pick')}
          />}
        </View>
      </View>
    </PageCustom>
  );
}