import { useState } from "react";
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 { useAgentStore } from "@/store/agentStore";
import useEditContactCard from "@/hooks/useEditContactCard";
export default function Index() {
  const agentContactCard = useAgentStore((state)=> state.agentContactCard)
  const {value, onChange, handleSubmit} = useEditContactCard('name', agentContactCard?.name)
  
  

  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
            maxlength={20}
          />
        </View>
        <BottomBar>
          <ButtonMain disabled={!value.length} onClick={handleSubmit}>保存</ButtonMain>
        </BottomBar>
      </View>
    </PageCustom>
  );
}
