import { View, Image } from "@tarojs/components";
import style from "./index.module.less";
import Taro from "@tarojs/taro";
import LoginPopup from '@/components/LoginPopup'
import { getNewAgentInfo } from "@/service/agent";
import { useState } from "react";
import IconIndexProfile from '@/images/svgs/index/IconIndexProfile.svg'
import IconIndexChat from '@/images/svgs/index/IconIndexChat.svg'
import IconIndexContent from '@/images/svgs/index/IconIndexContent.svg'
interface IProps {
  // children: JSX.Element|JSX.Element[]
}
export default function Index({}: IProps) {

  const [showLogin, setShowLogin] = useState(false);
  const handleCreate = async ()=> {
    try{
      const agentDetail = await getNewAgentInfo();
      if(agentDetail){
        console.log(agentDetail)
        Taro.navigateTo({ url: `/pages/agent/index`});
      }
    }catch(e){
      if(e.code === 401){
        setShowLogin(true)
      }

    }

  }
  const handleOnEnd = ()=> {
    setShowLogin(false)
  }
  return (
    <View className={style.container}>
      <View className={style.demoAvatar}>
        <Image className={style.demoAvatar} src="https://cdn.wehome.cn/cmn/png/159/META-H8UKWHWU-8HXWA0PE7HXUV4QMQUBV2-EHO2AUCM-HC.png" mode="widthFix"></Image>
      </View>
      <View className={style.content}>
        <View className={style.welcomBar}>
          <View className={style.hello}>你好！</View>
          <View className={style.welcome}>欢迎你，体验「小蓝本智能体」</View>
        </View>
        <View className={style.box}>
          <View className={style.boxInner}>
            <View className={style.headline}>
              <View>开启你的专属 AI 分身，</View>
              <View>让客户随时随地了解你和你的解决方案</View>
            </View>
            <View className={style.list}>
                <View className="flex items-center gap-6">
                  <Image src={IconIndexProfile} className="w-16 h-16"></Image>
                  <View>企业+个人资料统一管理</View>
                </View>
                <View className="flex items-center gap-6">
                  <Image src={IconIndexChat} className="w-16 h-16"></Image>
                  <View>客户问题，AI 自动回应</View>
                </View>
                <View className="flex items-center gap-6">
                  <Image src={IconIndexContent} className="w-16 h-16"></Image>
                  <View>你的内容一页呈现</View>
                </View>
            </View>
          </View>
          <View className="button-rounded-big" onClick={handleCreate}>创建智能体</View>
        </View>
      </View>
      <LoginPopup setShowPopup={setShowLogin} showPopup={showLogin} onEnd={handleOnEnd}></LoginPopup>
      </View>
  );
}
