import NavBarNormal from "@/components/nav-bar-normal/index";
import { View } from "@tarojs/components";
import PageCustom from "@/components/page-custom/index";

import CardList from "@/components/list/card-list";
import TagCertificated from "@/components/tag-certificated";
import CardListItem from "@/components/list/card-list-item";
import Taro, { useRouter } from "@tarojs/taro";
import { useAgentStore } from "@/store/agentStore";
import { TAgentDetail } from "@/types/agent";

const  RenderEntCard = (agent: TAgentDetail|null, navToUrl: (url: string)=>void) => {
  if(!agent?.entName){
    return <></>
  }
  return <View className="px-16 w-full pt-12">
    <CardList>
      <View className="py-16 px-20 flex flex-col gap-20">
        <CardListItem underline arrow onClick={()=> navToUrl('/pages/editor-pages/editor-company/index')}>
          <View className="flex items-center font-normal pb-16">
            <View className="flex-1 font-normal">企业</View>
            <View className="text-gray-65 mr-8 truncate max-w-[188px]">{agent?.entName}</View>
          </View>
        </CardListItem>
        <CardListItem underline>
          <View className="flex items-center font-normal pb-16">
            <View className="flex-1 font-normal">企业认证</View>
            <TagCertificated />
          </View>
        </CardListItem>
        <CardListItem arrow onClick={()=> navToUrl('/pages/editor-pages/editor-position/index')}>
          <View className="flex items-center font-normal pb-16">
            <View className="flex-1 font-normal">职位</View>
            <View className="text-gray-65 mr-8">{agent?.position}</View>
          </View>
        </CardListItem>
      </View>
    </CardList>
  </View>
}

export default function Index() {
  const router = useRouter()
  const {agentId} = router.params
  const agent = useAgentStore(state => state.agent)
  const navToUrl = (url: string)=> {
    Taro.navigateTo({url})
  }
  

  return (
    <PageCustom>
      <NavBarNormal backText="数字名片"></NavBarNormal>
      <View className="px-16 w-full pt-4">
        <CardList>
          <View className="py-16 px-20 flex flex-col gap-20">
            <CardListItem underline arrow onClick={()=> navToUrl(`/pages/editor-pages/editor-name/index?agentId=${agentId}`)}>
              <View className="flex items-center font-normal pb-16">
                <View className="flex-1 font-normal">姓名</View>
                <View className="text-gray-65 mr-8">{agent?.name}</View>
              </View>
            </CardListItem>
            <CardListItem underline arrow onClick={()=> navToUrl(`/pages/editor-pages/editor-phone/index?agentId=${agentId}`)}>
              <View className="flex items-center font-normal pb-16">
                <View className="flex-1 font-normal">手机号码</View>
                <View className="text-gray-65 mr-8">{agent?.mobile}</View>
              </View>
            </CardListItem>
            <CardListItem underline arrow onClick={()=> navToUrl(`/pages/editor-pages/editor-email/index?agentId=${agentId}`)}>
              <View className="flex items-center font-normal pb-16">
                <View className="flex-1 font-normal">联系邮箱</View>
                <View className="text-gray-65 mr-8 truncate max-w-[188px]">{agent?.email}</View>
              </View>
            </CardListItem>
            <CardListItem underline arrow>
              <View className="flex items-center font-normal pb-16">
                <View className="flex-1 font-normal">联系地址</View>
                <View className="text-gray-65 mr-8 truncate max-w-[188px]">{agent?.address}</View>
              </View>
            </CardListItem>
            <CardListItem arrow onClick={()=> navToUrl('/pages/editor-pages/editor-qrcode/index')}>
              <View className="flex items-center font-normal pb-16">
                <View className="flex-1 font-normal">我的二维码</View>
                <View className="text-gray-65 mr-8 text-primary">已上传</View>
              </View>
            </CardListItem>
          </View>
        </CardList>
      </View>

      {RenderEntCard(agent, navToUrl)}
      
    </PageCustom>
  );
}
