import  { useState } from "react";
import "./index.css";
import { Form, Input } from "antd";
import { useEffect } from "react";
import { useGetChats } from "../../apis/Chat";
/**
 * React component for a chatbot.
 * @interface Chatbot
 * @component
 *
 * @returns {JSX.Element}
 */
const ChatBot = () => {
  /**
   * State to manage whether the chat is open or closed.
   * @type {boolean}
   * @default false
   * @name openChat
   * @memberOf ChatBot
   */
  const [openChat, setOpenChat] = useState(false);
  /**
   * State to manage chat messages.
   * @type {Array.<{id: string, message: string}>}
   * @name messages
   * @memberOf ChatBot
   */
  const [messages, setMessages] = useState([
    { id: "bot", message: "Hi there 👋 Got a question? I'm here to help 😄" },
  ]);
  /**
   * Form instance for the chat input.
   * @type {Form}
   * @name form
   * @memberOf ChatBot
   */
  const [form] = Form.useForm();
  /**
   * Hook to fetch chat data when component mounts.
   * @function
   * @name useGetChats
   * @memberOf ChatBot
   */
  const { mutate } = useGetChats();
  /**
   * Effect to scroll to the bottom of the chat messages when messages change.
   * @function
   * @name useEffect
   * @memberOf ChatBot
   */
  useEffect(() => {
    let element = document.querySelector("#chat_messages");
    const scroll = (el) => {
      el.scroll({ top: el.scrollHeight });
    };
    scroll(element);
  }, [messages]);
  /**
   * Handler for form submission.
   * @function
   * @name onFinish
   * @param {Object} values - Form values.
   * @param {string} values.message - The user's message.
   * @memberOf ChatBot
   */
  const onFinish = (values) => {
    form.setFieldValue("message", "");
    setMessages((current) => [
      ...current,
      { id: "your", message: values.message },
    ]);
    mutate(
      { message: values.message },
      {
        onSuccess: (res) => {

          setMessages((current) => [
            ...current,
            { id: "bot", message: res?.data?.message },
          ]);
        },
      }
    );
  };
  return (
    <div className="chatbot_container ">
      <div
        className={
          openChat
            ? "chatbot_message_container  relative"
            : "close_chat_message"
        }
      >
        <div className="chatbot_heading">
          <div>
            <h4>AI BOT PSMS</h4>
            <p className="text-sm">I,m here to assist about PSMS. </p>
          </div>
          <div
            className="chat_close_btn" 
            onClick={() => setOpenChat(false)}
          >
            <ion-icon name="close-outline"></ion-icon>
          </div>
        </div>
        <div
          id="chat_messages"
          className="chat_messages"
        >
          {messages?.map((item, index) => {
            return (
              <div key={index}>
                <div
                  className={
                    item.id !== "bot" ? " your_message" : "bot_message"
                  }
                >
                  <div>{item.message}</div>
                </div>
              </div>
            );
          })}
        </div>
        <Form
          onFinish={onFinish}
          form={form}
        >
          <div className="message_sender flex m-1">
            <Form.Item
              name="message"
              style={{ width: "100%" }}
              rules={[
                {
                  required: true,
                  message: "",
                },
              ]}
            >
              <Input
                autoComplete="off"
                placeholder={"Type a message..."}
                addonAfter={
                  <div
                    onClick={() => form.submit()}
                    style={{ cursor: "pointer" }}
                  >
                    <ion-icon name="send"></ion-icon>
                  </div>
                }
              />
            </Form.Item>
          </div>
        </Form>
      </div>
      <div className="chatbot_button mt-1 flex justify-end ">
        <div
          className="popup_btn  flex justify-center align-items-center"
          onClick={() => setOpenChat(!openChat)}
          style={{
            height: 40,
            right: 30,
          }}
        >
          <ion-icon name="chatbubbles-outline"></ion-icon>
        </div>
      </div>
    </div>
  );
};

export default ChatBot;