import { View,Image } from "@tarojs/components";
import { useEffect, useState } from "react";
import { isSuccess } from "@/utils";
import { getVisitorMessages } from "@/service/visitor";
import { TVisitorChat } from "@/types/visitor";
import IconEditButtonBlue from '@/images/svgs/dashboard/IconEditButtonBlue.svg'

import style from "./index.module.less";
import Taro from "@tarojs/taro";

interface IProps {
  visitorId: string,
  sessionId: string,
  showMoreButton?: boolean
}
export default ({ visitorId, sessionId, showMoreButton = false }:IProps) => {
  
  const [question, setQuestion] = useState<TVisitorChat|null>(null);
  const [answer, setAnswer] = useState<TVisitorChat|null>(null);

  const fetchData = async () => {
    const response = await getVisitorMessages({pageSize: 2, visitorId, sessionId });
    if (isSuccess(response.status)) {
      const [q, a] = response.data.data ?? []
      if(q){
        setQuestion(q)
      }
      if(a){
        setAnswer(a)
      }
    }
  };

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

  
  const handleClick = () => {
    Taro.navigateTo({
      url: `/pages/chat-session-messages/index?visitorId=${visitorId}&sessionId=${sessionId}`,
    });
  };
  

  return (
    <View className="w-full">
      <View className={` bg-white rounded-12 overflow-hidden`}>
        <View className="p-16">
          <View className="text-14 text-title mb-8">{question?.content}</View>
          {!!answer?.content?.length && <View className="p-16 text-title rounded-8 relative" style={{backgroundColor: '#F4F9FF'}}>
              <View>{answer?.content}</View>
              {/* <View className={style.editButton}>
                <Image src={IconEditButtonBlue} className="w-14 h-14" />
              </View> */}
            </View>}
        </View>
        {showMoreButton && <View
          className="text-primary flex-center border-top1-gray bg-white py-10"
          onClick={handleClick}
        >
          查看更多
        </View>}
      </View>
      
      {/* <View className="text-primary flex-center" onClick={handleClick}>查看更多</View> */}
      {/* {list.map(item => {
        return <View className="px-16 bg-white">
          <View className="text-14 text-title"></View>
        </View>
      })} */}
    </View>
    
  );
};
