import type React from 'react';
import { useEffect } from 'react';
import cs from 'classnames';
import { View, useChatContext } from 'tuikit-atomicx-react/chat';
import classes from './Chat.module.scss';

interface ChatProps {
  className?: string | undefined;
  style?: React.CSSProperties | undefined;
  children?: React.ReactNode;
  PlaceholderEmpty?: React.ReactNode;
  conversationID?: string | undefined;
}

type IChatProps = ChatProps;

const Chat = (props: ChatProps) => {
  const {
    PlaceholderEmpty = null,
    className,
    style,
    children,
    conversationID,
  } = props;

  const { activeConversation, setActiveConversation } = useChatContext();

  useEffect(() => {
    if (conversationID) {
      setActiveConversation(conversationID);
    }
  }, [conversationID, setActiveConversation]);

  if (!activeConversation?.conversationID) {
    return PlaceholderEmpty;
  }

  return (
    <View
      className={cs(classes.chat, className)}
      style={style}
    >
      {children}
    </View>
  );
};

export { Chat };
export type { IChatProps };