import React from 'react';
import styled from 'styled-components';
import { Chat, IStyles } from '../Chat/Chat';
import { SearchCharacter } from './SearchCharacter';
import { ChatMessage, PrivateChatCharacter } from './types';

interface ChatContentProps {
  isPrivate: boolean;
  isTrade: boolean;
  isGlobal: boolean;
  searchCharacterUI: boolean;
  chatMessages: ChatMessage[];
  onSendGlobalChatMessage: (message: string) => void;
  onSendLocalChatMessage: (message: string) => void;
  onSendPrivateChatMessage: (message: string) => void;
  onSendTradeMessage: (message: string) => void;
  onCloseButton: () => void;
  styles?: IStyles;
  onFocus?: () => void;
  onBlur?: () => void;
  isExpanded: boolean;
  autoCloseOnSend: boolean;
  onChangeCharacterName: (characterName: string) => void;
  privateChatCharacters?: PrivateChatCharacter[];
  hideSearchCharacterUI: () => void;
  onCharacterClick?: (character: PrivateChatCharacter) => void;
  isGuild: boolean;
  onSendGuildChatMessage: (message: string) => void;
}

export const ChatContent: React.FC<ChatContentProps> = ({
  isPrivate,
  isTrade,
  isGlobal,
  searchCharacterUI,
  chatMessages,
  onSendLocalChatMessage,
  onSendGlobalChatMessage,
  onSendPrivateChatMessage,
  onSendTradeMessage,
  onCloseButton,
  styles,
  onFocus,
  onBlur,
  isExpanded,
  autoCloseOnSend,
  onChangeCharacterName,
  privateChatCharacters,
  hideSearchCharacterUI,
  onCharacterClick,
  isGuild,
  onSendGuildChatMessage,
}) => {
  const handleSendMessage = (message: string) => {
    if (autoCloseOnSend) {
      onCloseButton();
    }

    if (isPrivate) {
      onSendPrivateChatMessage(message);
    } else if (isTrade) {
      onSendTradeMessage(message);
    } else if (isGuild) {
      onSendGuildChatMessage(message);
    } else if (isGlobal) {
      onSendGlobalChatMessage(message);
    } else {
      onSendLocalChatMessage(message);
    }
  };

  if (isPrivate && searchCharacterUI) {
    return (
      <SearchCharacter
        onFocus={onFocus}
        onBlur={onBlur}
        onChangeCharacterName={onChangeCharacterName}
        styles={styles}
        recentCharacters={privateChatCharacters}
        hideSearchCharacterUI={hideSearchCharacterUI}
        onCharacterClick={onCharacterClick}
      />
    );
  }

  return (
    <ChatWrapper>
      <Chat
        chatMessages={chatMessages}
        onSendChatMessage={handleSendMessage}
        sendMessage={true}
        onCloseButton={onCloseButton}
        styles={styles}
        onFocus={onFocus}
        onBlur={onBlur}
        isExpanded={isExpanded}
      />
    </ChatWrapper>
  );
};

const ChatWrapper = styled.div`
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
`;
