import type React from 'react';
import { forwardRef } from 'react';
import { ConversationType } from 'tuikit-atomicx-react/chat';
import { IconClose1, useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { View } from 'tuikit-atomicx-react/chat';
import { useChatContext } from 'tuikit-atomicx-react/chat';
import { C2CChatSetting } from './C2CChatSetting';
import classes from './ChatSetting.module.scss';
import { GroupChatSetting } from './GroupChatSetting';
import './icon-btn.scss';

interface ChatSettingProps {
  className?: string | undefined;
  style?: React.CSSProperties | undefined;
  onClose?: (() => void) | undefined;
}

const ChatSetting = forwardRef<HTMLDivElement, ChatSettingProps>((props, ref) => {
  const { className, style, onClose } = props;

  const { t, direction } = useUIKit();

  const { activeConversation } = useChatContext();

  if (!activeConversation) {
    return null;
  }

  const chatType = activeConversation.type;
  const headerTitle = chatType === ConversationType.Group
    ? t('ChatSetting.group_setting_title')
    : t('ChatSetting.chat_setting_title');

  const renderContent = () => {
    switch (chatType) {
      case ConversationType.C2C:
        return <C2CChatSetting />;
      case ConversationType.Group:
        return <GroupChatSetting />;
      default:
        return null;
    }
  };

  return (
    <View
      ref={ref}
      className={cs(classes['chat-setting'], className)}
      style={style}
      dir={direction}
    >
      <View className={classes['chat-setting__header']} flexDir="row">
        <span className={classes['chat-setting__title']}>{headerTitle}</span>
        <IconClose1
          className={cs(classes['chat-setting__close'], 'unique-icon-btn')}
          size="24px"
          onClick={() => onClose?.()}
        />
      </View>
      {renderContent()}
    </View>
  );
});

ChatSetting.displayName = 'ChatSetting';

export { ChatSetting };
export type { ChatSettingProps };