"use strict";

/** @format */

import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import { View, StyleSheet, FlatList, Pressable, Animated } from 'react-native';
import { SearchInput } from '../InputComponents/Search';
import { BurgerMenuIcon, SearchIcon } from '../../assets/icons';
import ChatRoomItem from '../RoomComponents/ChatRoomItem';
import { useChatSettingState } from '../../hooks/useChatSettingState';
import Button from '../styled/Button';
import { HeaderRoomList } from '../Header/HeaderRoomList';
import { HeaderRoomListMenu } from '../Menu/HeaderRoomListMenu';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const LONG_PRESS_THRESHOLD = 200;
const RoomList = ({
  chats,
  burgerMenu = false,
  onRoomClick
}) => {
  const {
    config
  } = useChatSettingState();
  const [open, setOpen] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [isLongPress, setIsLongPress] = useState(false);
  const [isDrawerOpen, setDrawerOpen] = useState(false);
  const pressTimer = useRef(null);
  const containerRef = useRef(null);
  const drawerAnimation = useRef(new Animated.Value(0)).current;
  const overlayAnimation = useRef(new Animated.Value(0)).current;
  const handlePressIn = useCallback(() => {
    setIsLongPress(false);
    pressTimer.current = setTimeout(() => {
      setIsLongPress(true);
    }, LONG_PRESS_THRESHOLD);
  }, []);
  const handlePressOut = useCallback(() => {
    if (pressTimer.current) {
      clearTimeout(pressTimer.current);
    }
  }, []);
  const performClick = useCallback(chat => {
    if (!isLongPress) {
      onRoomClick?.(chat);
    }
    setOpen(false);
  }, [onRoomClick, isLongPress]);
  const handleSearchChange = useCallback(text => {
    setSearchTerm(text);
  }, []);
  const getLastMessage = useCallback(chat => chat?.messages?.[chat?.messages.length - 1], []);
  const filteredChats = useMemo(() => {
    const lowerCaseSearchTerm = searchTerm.toLowerCase();
    const chatsMap = new Map();
    if (!chatsMap.has(lowerCaseSearchTerm)) {
      const result = chats.filter(chat => {
        const hay = `${chat?.title || ''} ${chat?.name || ''}`.toLowerCase();
        return hay.includes(lowerCaseSearchTerm);
      }).sort((a, b) => {
        if (getLastMessage(a)?.id && getLastMessage(b)?.id) {
          return Number(getLastMessage(b).id) - Number(getLastMessage(a).id);
        } else if (getLastMessage(a)?.id) {
          return -1;
        } else if (getLastMessage(b)?.id) {
          return 1;
        }
        return -1;
      });
      chatsMap.set(lowerCaseSearchTerm, result);
    }
    return chatsMap.get(lowerCaseSearchTerm) || [];
  }, [chats, searchTerm]);
  useEffect(() => {
    if (burgerMenu) {
      // Since React Native doesn't have a native mouse event, we won't use `mousedown`
      // A listener for "blur" event (on touch outside) or "TouchableWithoutFeedback" may be used for mobile
    }
  }, [burgerMenu]);
  const toggleDrawer = () => {
    if (isDrawerOpen) {
      closeDrawer();
    } else {
      setDrawerOpen(true);
      Animated.parallel([Animated.timing(drawerAnimation, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true
      }), Animated.timing(overlayAnimation, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true
      })]).start();
    }
  };
  const closeDrawer = () => {
    Animated.parallel([Animated.timing(drawerAnimation, {
      toValue: 0,
      duration: 300,
      useNativeDriver: true
    }), Animated.timing(overlayAnimation, {
      toValue: 0,
      duration: 300,
      useNativeDriver: true
    })]).start(() => {
      setDrawerOpen(false);
    });
  };
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [burgerMenu && !open && /*#__PURE__*/_jsx(Button, {
      style: {
        padding: 8,
        borderRadius: 16,
        backgroundColor: 'transparent'
      },
      color: "black",
      unstyled: true,
      EndIcon: /*#__PURE__*/_jsx(BurgerMenuIcon, {
        color: config?.colors?.primary
      }),
      onPress: () => setOpen(!open)
    }), /*#__PURE__*/_jsx(View, {
      ref: containerRef,
      style: [styles.container, config?.roomListStyles],
      children: (open || !burgerMenu) && /*#__PURE__*/_jsx(_Fragment, {
        children: /*#__PURE__*/_jsxs(View, {
          style: styles.scrollContainer,
          children: [/*#__PURE__*/_jsx(HeaderRoomList, {
            setDrawerOpen: toggleDrawer
          }), /*#__PURE__*/_jsx(FlatList, {
            data: filteredChats,
            keyExtractor: item => item.jid,
            renderItem: ({
              item
            }) => /*#__PURE__*/_jsx(Pressable
            // Stable testID so e2e drivers can target a room
            // row by its jid local-part (e.g. Main chat under
            // app id `..._...759` → testID `room-...759`).
            , {
              testID: `room-${(item.jid || '').split('@')[0]}`,
              accessibilityLabel: `room-${item.title || item.name}`,
              onPress: () => performClick(item),
              onPressIn: handlePressIn,
              onPressOut: handlePressOut,
              children: /*#__PURE__*/_jsx(ChatRoomItem, {
                chat: item,
                config: config
              })
            }),
            ListHeaderComponent: /*#__PURE__*/_jsx(SearchInput, {
              icon: /*#__PURE__*/_jsx(SearchIcon, {
                height: 20
              }),
              value: searchTerm,
              onChangeText: handleSearchChange,
              placeholder: "Search..."
            }),
            style: styles.chatList
          }), /*#__PURE__*/_jsx(HeaderRoomListMenu, {
            closeDrawer: closeDrawer,
            drawerAnimation: drawerAnimation,
            overlayAnimation: overlayAnimation,
            isDrawerOpen: isDrawerOpen
          })]
        })
      })
    })]
  });
};
const styles = StyleSheet.create({
  burgerButton: {
    fontSize: 24,
    padding: 10,
    color: '#333'
  },
  container: {
    width: '100%',
    height: '100%',
    flex: 1,
    backgroundColor: '#fff'
  },
  scrollContainer: {
    flexGrow: 1
  },
  headerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    justifyContent: 'space-between'
  },
  chatList: {
    flex: 1,
    paddingTop: 8,
    paddingHorizontal: 16,
    backgroundColor: '#FAFAFA'
  }
});
export default RoomList;
//# sourceMappingURL=RoomList.js.map