import { useEffect, useRef } from "react";
import { Button } from 'antd';
import { initAilyChat } from "@apaas-ai/aily-cui-sdk";

export const AilyChatPanel= () => {
  const chatPanelRef = useRef(null);

  const handleSendMessage = () => {
    chatPanelRef.current.updateConfig({
      conversation: {
        userAvatar:
          "https://s1-imfile.feishucdn.com/static-resource/v1/658c938a-28e7-41ce-8e10-82f008ab2b6g~"
      }
    });
  };

  async function initPanel(idstr) {
    const container = document.querySelector(idstr);
    chatPanelRef.current = await initAilyChat(container, {
      appKey: "a_dcd4f955d5584a44b8840cc4a723bea2",
      conversation: {
        needAvatar: true,
        needCache: false,
        needWelcomeMessage: true
      },
      editor: {
        display: true,
        needFileUpload: true,
        needImageUpload: true,
        needMention: false
      },
      common: {
        baseURL: "https://ae.feishu.cn/oda",
        channelType: "AILY_CUI_SDK"
      },
      events: {
        inited: (data) => {
          console.log("~~~~~~inited", data);
        },
        onMessage: (data) => {
          console.log("~~~~~onMessage", data);
        },
        onMessageAppend: (msg) => {
          console.log("~~~~~onMessageAppend", msg);
        }
      }
    });
  }

  useEffect(() => {
    initPanel("#coplitor-cont");
  }, []);

  return (
    <div className="wrapper">
      <div id="coplitor-cont" style={{height:900,width:'100%'}}></div>
      <Button onClick={handleSendMessage}>sendMessage</Button>
    </div>
  );
};
