import { View } from "@tarojs/components";

import PageCustom from "@/components/page-custom/index";
import NavBarNormal from "@/components/NavBarNormal/index";
import ButtonMain from "@/components/buttons/ButtonMain";
import BottomBar from "@/components/BottomBar";
import WemetaTextarea from "@/components/wemeta-textarea/index";
import TextPolish from '@/components/TextPolish'
import { useAgentStore } from "@/store/agentStore";
import useEditAgent from "@/hooks/useEditAgent";


export default function Index() {
  const agent = useAgentStore((state)=> state.agent)  
  const {handleSubmit, onChange, value, setValue} = useEditAgent('personality', agent?.personality ?? '')
  
  const onPolished = (text:string|null)=> {
    if(text){
      setValue(text)
    }
    
  }

  return (
    <PageCustom>
      <NavBarNormal backText="人设"></NavBarNormal>
      <View className="flex flex-col items-center w-full">
      <View
            className="w-full p-16"
          >
            <WemetaTextarea
              value={value}
              onBlur={(value: string) => onChange(value)}
              onInput={(value: string) => onChange(value)}
              placeholder="示例：你是一位汽车销售人员，拥有专业的汽车相关知识，善于耐心的解答客户提出的每一个问题，并会主动邀请客户上门试驾。"
              autoFocus
              extra={()=> <TextPolish text={value} type="personality" onPolished={onPolished}/>}
            />
          </View>
        
        <BottomBar>
          <ButtonMain className="flex-1" disabled={!value.length} onClick={handleSubmit}>保存</ButtonMain>
        </BottomBar>
      </View>
    </PageCustom>
  );
}