import React from 'react';
import { FaDiscord, FaWhatsapp } from 'react-icons/fa';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';
import { useChat } from '../../hooks/useChat';
import { Chat } from '../Chat/Chat';
import { ChatContent } from './ChatContent';
import { ChatTabs } from './ChatTabs';
import { ExpandButton } from './ExpandButton';
import { RecentChats } from './RecentChats';
import { IChatRevampProps } from './types';

interface ITopBarProps {
  isExpanded: boolean;
}

interface IAllChatsContainerProps {
  width: string;
  height: string;
  isExpanded: boolean;
}

interface IChatContentWrapperProps {
  isPrivate: boolean;
}

export const ChatRevamp: React.FC<IChatRevampProps> = ({
  chatMessages,
  onSendGlobalChatMessage,
  onSendGuildChatMessage,
  onChangeCharacterName,
  onFocus,
  onBlur,
  onCloseButton,
  styles,
  tabs,
  onChangeTab,
  activeTab = 'global',
  privateChatCharacters,
  onCharacterClick,
  onSendPrivateChatMessage,
  recentChatCharacters,
  recentSelectedChatCharacterId,
  onPreviousChatCharacterClick,
  onRemoveRecentChatCharacter,
  unseenMessageCharacterIds,
  onSendTradeMessage,
  searchCharacterUI = false,
  hideSearchCharacterUI = () => {},
  showSearchCharacterUI = () => {},
  minimizedByDefault = false,
  autoCloseOnSend,
  onSendLocalChatMessage,
  onDiscordClick,
  onWhatsAppClick,
}: IChatRevampProps) => {
  const isPrivate = activeTab === 'private';
  const isTrade = activeTab === 'trade';
  const isGuild = activeTab === 'guild';
  const isGlobal = activeTab === 'global';
  const chatHook = useChat({
    minimizedByDefault,
    isPrivate,
    onChangeTab,
    onPreviousChatCharacterClick,
    unseenMessageCharacterIds,
  });

  const handleDiscordClick = (e: React.MouseEvent) => {
    e.preventDefault();
    onDiscordClick?.();
  };

  const handleWhatsAppClick = (e: React.MouseEvent) => {
    e.preventDefault();
    onWhatsAppClick?.();
  };

  return (
    <ChatRevampContainer>
      <TopBar isExpanded={chatHook.isExpanded}>
        {chatHook.isExpanded && (
          <>
            <ChatTabs
              tabs={tabs}
              activeTab={activeTab}
              onChangeTab={chatHook.handleTabChange}
            />
            <SocialButtons>
              <SocialButton onClick={handleDiscordClick}>
                <FaDiscord />
              </SocialButton>
              <SocialButton onClick={handleWhatsAppClick}>
                <FaWhatsapp />
              </SocialButton>
            </SocialButtons>
          </>
        )}
        <ExpandButton
          isExpanded={chatHook.isExpanded}
          onClick={chatHook.toggleExpand}
        />
      </TopBar>
      <AllChatsContainer
        width={styles?.width || '80%'}
        height={styles?.height || 'auto'}
        isExpanded={chatHook.isExpanded}
      >
        {chatHook.isExpanded ? (
          <ExpandedChatContent>
            {isPrivate && (
              <RecentChats
                showRecentChats={chatHook.showRecentChats}
                toggleRecentChats={chatHook.toggleRecentChats}
                hasUnseenMessages={!!chatHook.hasUnseenMessages}
                showSearchCharacterUI={showSearchCharacterUI}
                recentChatCharacters={recentChatCharacters}
                recentSelectedChatCharacterId={recentSelectedChatCharacterId}
                unseenMessageCharacterIds={unseenMessageCharacterIds}
                onPreviousChatCharacterClick={
                  chatHook.handlePreviousChatCharacterClick
                }
                onRemoveRecentChatCharacter={onRemoveRecentChatCharacter}
                isPrivate={isPrivate}
                hideSearchCharacterUI={hideSearchCharacterUI}
              />
            )}
            <ChatContentWrapper isPrivate={isPrivate}>
              <ChatContent
                isPrivate={isPrivate}
                isTrade={isTrade}
                isGuild={isGuild}
                isGlobal={isGlobal}
                searchCharacterUI={searchCharacterUI}
                chatMessages={chatMessages}
                onSendGlobalChatMessage={onSendGlobalChatMessage}
                onSendPrivateChatMessage={onSendPrivateChatMessage}
                onSendTradeMessage={onSendTradeMessage}
                onSendGuildChatMessage={onSendGuildChatMessage}
                onSendLocalChatMessage={onSendLocalChatMessage}
                onCloseButton={onCloseButton}
                styles={styles}
                onFocus={onFocus}
                onBlur={onBlur}
                isExpanded={chatHook.isExpanded}
                autoCloseOnSend={autoCloseOnSend || false}
                onChangeCharacterName={onChangeCharacterName}
                privateChatCharacters={privateChatCharacters}
                hideSearchCharacterUI={hideSearchCharacterUI}
                onCharacterClick={onCharacterClick}
              />
            </ChatContentWrapper>
          </ExpandedChatContent>
        ) : (
          <CollapsedChatInput>
            <Chat
              chatMessages={[]}
              onSendChatMessage={onSendLocalChatMessage}
              sendMessage={true}
              onCloseButton={onCloseButton}
              styles={styles}
              onFocus={onFocus}
              onBlur={onBlur}
              isExpanded={false}
            />
          </CollapsedChatInput>
        )}
      </AllChatsContainer>
    </ChatRevampContainer>
  );
};

const ChatRevampContainer = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
`;

const TopBar = styled.div<ITopBarProps>`
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: ${({ isExpanded }) => (isExpanded ? 'auto' : '32px')};
  padding: 0 8px;
`;

const AllChatsContainer = styled.div<IAllChatsContainerProps>`
  width: ${({ width }) => width};
  height: ${({ height, isExpanded }) => (isExpanded ? height : 'auto')};
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
`;

const ChatContentWrapper = styled.div<IChatContentWrapperProps>`
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  width: ${({ isPrivate }) => (isPrivate ? '75%' : '100%')};
`;

const CollapsedChatInput = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
`;

const ExpandedChatContent = styled.div`
  display: flex;
  width: 100%;
  height: 100%;
`;

const SocialButtons = styled.div`
  display: flex;
  gap: 8px;
  margin-right: 42px;
`;

const SocialButton = styled.button`
  background-color: transparent;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 4px;
  margin-bottom: 4px;

  &:hover {
    color: ${uiColors.yellow};
  }
`;
