import { View, Image, Text } from "@tarojs/components";
import Taro, { useReachBottom, useRouter } from "@tarojs/taro";
import NavBarNormal from "@/components/NavBarNormal/index";
import PageCustom from "@/components/page-custom/index";
import { useEffect, useState } from "react";
import { isSuccess } from "@/utils";
import { getVisitorInfo } from "@/service/visitor";
import VisitorSummary from "./components/VisitorSummary";

import { getVisitorMessagesByMsgId } from "@/service/visitor";
import { TVisitorAgent, TVisitorChat } from "@/types/visitor";
import IconEditButtonBlue from "@/images/svgs/dashboard/IconEditButtonBlue.svg";
import style from "./index.module.less";

export default () => {
  const router = useRouter();
  const { visitorId, msgId } = router.params;
  if (!visitorId || !msgId) {
    return <View>...</View>;
  }

  const [visitor, setVisitor] = useState<TVisitorAgent>();
  const [list, setList] = useState<TVisitorChat[]>([]);

  const fetchVisitor = async ()=> {
    const response = await getVisitorInfo(visitorId);
      if (isSuccess(response.status)) {
        setVisitor(response.data);
      }
  }
  const fetchData = async () => {
    const response = await getVisitorMessagesByMsgId({
      visitorId,
      msgId,
      size: 10,
    });
    if (isSuccess(response.status)) {
      setList(response.data)
    }
  };

  

  
  useEffect(() => {
    fetchVisitor();
    fetchData();
  }, []);


  

  const renderContent = (item: TVisitorChat) => {
    if (item.role === "user") {
      return <View className="text-14 text-title mb-8">{item?.content}</View>;
    }

    return (
      <View
        className="p-16 text-title rounded-8 relative"
        style={{ backgroundColor: "#F4F9FF" }}
      >
        <View>{item.content}</View>
      </View>
    );
  };

  return (
    <PageCustom>
      <NavBarNormal scrollFadeIn>对话列表</NavBarNormal>
      {visitor ? <VisitorSummary data={visitor} /> : <></>}
      <View className="flex-1 overflow-hidden w-full mb-100">
        <View className="flex flex-col gap-16 px-16 w-full">
          {list.map((item) => {
            return (
              <View className={` bg-white rounded-12 overflow-hidden`}>
                <View className="p-16">{renderContent(item)}</View>
              </View>
            );
          })}
        </View>
      </View>
    </PageCustom>
  );
};
