import React from 'react';
import { RxCross2, RxMagnifyingGlass } from 'react-icons/rx';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';
import { uiFonts } from '../../constants/uiFonts';
import { Ellipsis } from '../shared/Ellipsis';
import { PrivateChatCharacter } from './types';

interface IRecentChatsProps {
  showRecentChats: boolean;
  toggleRecentChats: () => void;
  hasUnseenMessages: boolean;
  showSearchCharacterUI: () => void;
  recentChatCharacters?: PrivateChatCharacter[];
  recentSelectedChatCharacterId?: string;
  unseenMessageCharacterIds?: string[];
  onPreviousChatCharacterClick: (character: PrivateChatCharacter) => void;
  onRemoveRecentChatCharacter?: (character: PrivateChatCharacter) => void;
  isPrivate: boolean;
  hideSearchCharacterUI: () => void; // Add this line
}

export const RecentChats: React.FC<IRecentChatsProps> = ({
  showRecentChats,
  toggleRecentChats,
  hasUnseenMessages,
  showSearchCharacterUI,
  recentChatCharacters,
  recentSelectedChatCharacterId,
  unseenMessageCharacterIds,
  onPreviousChatCharacterClick,
  onRemoveRecentChatCharacter,
  isPrivate,
  hideSearchCharacterUI, // Add this line
}) => {
  const handlePreviousChatCharacterClick = (
    character: PrivateChatCharacter
  ) => {
    onPreviousChatCharacterClick(character);
    hideSearchCharacterUI(); // Call hideSearchCharacterUI here
  };

  return (
    <RecentChatTabContainer isOpen={showRecentChats} isPrivate={isPrivate}>
      <RecentChatTopBar>
        <BurgerIconContainer
          onPointerDown={toggleRecentChats}
          hasUnseenMessages={hasUnseenMessages}
        >
          <BurgerLineIcon />
          <BurgerLineIcon />
          <BurgerLineIcon />
        </BurgerIconContainer>
        {showRecentChats && (
          <SearchButton onPointerDown={showSearchCharacterUI}>
            <RxMagnifyingGlass size={16} color={uiColors.white} />
          </SearchButton>
        )}
      </RecentChatTopBar>
      <RecentChatLogContainer isOpen={showRecentChats}>
        {recentChatCharacters?.map(character => (
          <ListElementContainer key={character._id}>
            <ListElement
              active={character._id === recentSelectedChatCharacterId}
              onPointerDown={() => handlePreviousChatCharacterClick(character)}
            >
              <StatusDot
                isUnseen={
                  unseenMessageCharacterIds?.includes(character._id) ?? false
                }
              />
              <Ellipsis maxWidth="140px" maxLines={1}>
                {character.name}
              </Ellipsis>
            </ListElement>
            <CloseButton
              className="close-button"
              onPointerDown={() => onRemoveRecentChatCharacter?.(character)}
            >
              <RxCross2 size={16} />
            </CloseButton>
          </ListElementContainer>
        ))}
      </RecentChatLogContainer>
    </RecentChatTabContainer>
  );
};

const RecentChatTabContainer = styled.div<{
  isPrivate: boolean;
  isOpen: boolean;
}>`
  display: ${props => (props.isPrivate ? 'flex' : 'none')};
  flex-direction: column;
  border-right: 1px solid ${uiColors.gray};
  outline: none;
  width: ${props => (props.isOpen ? '25%' : '30px')};
  max-width: 200px;
  min-width: ${props => (props.isOpen ? '180px' : '30px')};
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  height: 100%;
  @media (max-width: 768px) {
    width: ${props => (props.isOpen ? '50%' : '30px')};
    min-width: ${props => (props.isOpen ? '150px' : '30px')};
  }
`;

const RecentChatTopBar = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  flex-shrink: 0;
`;

const SearchButton = styled.button`
  border: none;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 4px;
  position: relative;
`;

const BurgerIconContainer = styled.button<{ hasUnseenMessages: boolean }>`
  border: none;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 4px;
  gap: 2px;
  position: relative;

  &:after {
    content: '';
    width: 6px;
    height: 6px;
    position: absolute;
    top: 0;
    right: 2px;
    border-radius: 50%;
    background-color: ${uiColors.lightGreen};
    display: ${props => (props.hasUnseenMessages ? 'block' : 'none')};
  }
`;

const BurgerLineIcon = styled.span`
  width: 1rem;
  height: 2px;
  background-color: #ffffff;
`;

const RecentChatLogContainer = styled.div<{ isOpen: boolean }>`
  display: ${props => (props.isOpen ? 'flex' : 'none')};
  opacity: ${props => (props.isOpen ? 1 : 0)};
  flex-direction: column;
  gap: 0.25rem; // Reduce this from 0.5rem to 0.25rem
  transition: opacity 0.3s ease-in-out;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex-grow: 1;
  height: 0;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(51, 51, 51, 0.4) rgba(30, 30, 30, 0.4);

  /* WebKit and Chromium-based browsers */
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(30, 30, 30, 0.2);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(255, 102, 0, 0.5);
    border-radius: 4px;
    border: 2px solid rgba(30, 30, 30, 0.2);
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 102, 0, 0.7);
  }
`;

const ListElementContainer = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0; // Add small vertical padding
`;

const ListElement = styled.button<{ active: boolean }>`
  margin: 0 !important; // Remove vertical margins
  font-size: ${uiFonts.size.small} !important;
  padding: 2px;
  all: unset;
  color: ${props => (props.active ? uiColors.yellow : uiColors.white)};
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;

  &:hover {
    color: #ff0;
  }
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`;

const StatusDot = styled.span<{ isUnseen: boolean }>`
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: ${props =>
    props.isUnseen ? uiColors.lightGreen : uiColors.gray};
  display: inline-block;
  margin-right: 6px;
`;

const CloseButton = styled.button`
  all: unset;
  font-size: ${uiFonts.size.xxsmall};
  margin: 0 0.5rem;
  transition: all 0.2s ease-in-out;
  background-color: ${uiColors.red};
  color: ${uiColors.white};
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover {
    background-color: ${uiColors.white};
    color: ${uiColors.red};
  }
`;
