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

import CardList from "@/components/list/card-list";
import ListWrapper from "@/components/list/ListWrapper";
import ListRow from "@/components/list/ListRow";
import TagCertificated from "@/components/tag-certificated";
import Taro, { useRouter } from "@tarojs/taro";
import { useAgentStore } from "@/store/agentStore";
import { TAgentDetail } from "@/types/agent";
import  PickerSingleColumn from "@/components/Picker/PickerSingleColumn";
import useEditContactCard from "@/hooks/useEditContactCard";
import { useState } from "react";
const RenderEntCard = (
  agent: TAgentDetail | null,
  navToUrl: (url: string) => void
) => {
  const agentContactCard = useAgentStore((state)=> state.agentContactCard)
  // const { submit } = useEditContactCard('position', agentContactCard?.position)
  // // 当前选中的值
  // const options = ['销售人员', '客服与售后支持', '市场与商务合作人员', '新员工 / 培训岗位', '管理者 / 内容运营者']
  // // 是否显示选择器
  // const [showPicker, setShowPicker] = useState(false)

  // // 当前选中的值
  // const [selected, setSelected] = useState(options[0])

  // const handlePicked = (value: string) => {
  //   setSelected(value)
  //   submit(value, false)
  // }

  
  if (!agent?.isEnt) {
    return <View className="px-16 w-full pt-12">
        <ListWrapper>
            <ListRow
              underline
              arrow
              onClick={()=> {navToUrl('/pages/editor-pages/editor-ent-name/index')}}
            >
              <View className="flex items-center font-normal">
                <View className="flex-1 font-normal">企业</View>
                <View className="text-gray-65 truncate max-w-[188px]">
                  {agent?.entName}
                </View>
              </View>
            </ListRow>
            <ListRow
              arrow
              onClick={()=> {navToUrl('/pages/editor-pages/editor-position/index')}}
            >
              <View className="flex items-center font-normal">
                  <View className="flex-1 font-normal">职位</View>
                  <View className="text-gray-65 mr-8">{agent?.position}</View>
                </View>
              {/* <PickerSingleColumn headerTitle="您的岗位" options={options} selected={selected} onPicked={handlePicked} showPicker={showPicker} setShowPicker={setShowPicker}>
                
              </PickerSingleColumn> */}
            </ListRow>
        </ListWrapper>
      </View>;
  }
  return (
    <View className="px-16 w-full pt-12">
      <ListWrapper>
          <ListRow
            underline
          >
            <View className="flex items-center font-normal">
              <View className="flex-1 font-normal">企业</View>
              <View className="text-gray-65 truncate max-w-[188px]">
                {agent?.entName}
              </View>
            </View>
          </ListRow>
          <ListRow underline>
            <View className="flex items-center font-normal">
              <View className="flex-1 font-normal">企业认证</View>
              <TagCertificated />
            </View>
          </ListRow>
          <ListRow
            arrow
            onClick={()=> {navToUrl('/pages/editor-pages/editor-position/index')}}
          >
            <View className="flex items-center font-normal">
              <View className="flex-1 font-normal">职位</View>
              <View className="text-gray-65 mr-8">{agent?.position}</View>
            </View>
            {/* <PickerSingleColumn headerTitle="您的岗位" options={options} selected={selected} onPicked={handlePicked} showPicker={showPicker} setShowPicker={setShowPicker}>
              <View className="flex items-center font-normal" onClick={() => setShowPicker(true)}>
                <View className="flex-1 font-normal">职位</View>
                <View className="text-gray-65 mr-8">{agent?.position}</View>
              </View>
            </PickerSingleColumn> */}
          </ListRow>
      </ListWrapper>
    </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">
        <ListWrapper>
          <ListRow
            underline
            arrow
            rightRenderer={() => (
              <View className="text-gray-65 truncate max-w-160">
                {agent?.name}
              </View>
            )}
            onClick={() =>
              navToUrl(
                `/pages/editor-pages/editor-name/index?agentId=${agentId}`
              )
            }
          >
            姓名
          </ListRow>
          <ListRow
            rightRenderer={() => (
              <View className="text-gray-65 truncate max-w-160">
                {agent?.mobile}
              </View>
            )}
            underline
            arrow
            onClick={() =>
              navToUrl(
                `/pages/editor-pages/editor-phone/index?agentId=${agentId}`
              )
            }
          >
            手机号码
          </ListRow>
          <ListRow
            rightRenderer={() => (
              <View className="text-gray-65 truncate max-w-160">
                {agent?.email}
              </View>
            )}
            underline
            arrow
            onClick={() =>
              navToUrl(
                `/pages/editor-pages/editor-email/index?agentId=${agentId}`
              )
            }
          >
            联系邮箱
          </ListRow>
          <ListRow
            rightRenderer={() => (
              <View className="text-gray-65 truncate max-w-160">
                {agent?.address}
              </View>
            )}
            underline
            arrow
            onClick={() =>
              navToUrl(
                `/pages/editor-pages/editor-address/index?agentId=${agentId}`
              )
            }
          >
            联系地址
          </ListRow>
          <ListRow
            rightRenderer={() => {
              return !!agent?.qrCodeUrl?.length ? (
                <View className="text-gray-65 text-primary font-normal">已上传</View>
              ) : (
                <></>
              );
            }}
            arrow
            onClick={() => navToUrl("/pages/editor-pages/editor-qrcode/index")}
          >
            我的二维码
          </ListRow>
        </ListWrapper>
      </View>

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