"use strict";

import React, { useState, useMemo, useEffect } from 'react';
import { ModalTitle } from '../Modals/styledModalComponents';
import { ScrollableContainer, UserItem, Label } from './StyledComponents';
import Checkbox from './Checkbox';
import { debounce } from '../../helpers/debounce';
import { StyledInput } from '../styled/StyledInputComponents/StyledInputComponents';
import { useRoomState } from '../../hooks/useRoomState';
import { Text, View } from 'react-native';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const UsersList = ({
  style,
  selectedUsers,
  setSelectedUsers,
  headerElement,
  filter
}) => {
  const {
    usersSet
  } = useRoomState();
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredUsers, setFilteredUsers] = useState([]);
  const handleUserSelect = user => {
    setSelectedUsers(prev => {
      const isSelected = prev.some(u => u._id === user._id);
      return isSelected ? prev.filter(u => u._id !== user._id) : [...prev, user];
    });
  };
  const debouncedFilter = useMemo(() => debounce(term => {
    const lower = term.toLowerCase();
    const users = Object.values(usersSet).filter(user => `${user.firstName} ${user.lastName}`.toLowerCase().includes(lower));
    setFilteredUsers(users);
  }, 100), [usersSet]);
  useEffect(() => {
    debouncedFilter(searchTerm);
  }, [searchTerm, debouncedFilter]);
  useEffect(() => {
    setFilteredUsers(Object.values(usersSet));
  }, [usersSet]);
  return /*#__PURE__*/_jsxs(View, {
    style: {
      maxHeight: '100px',
      ...style
    },
    children: [headerElement ? /*#__PURE__*/_jsx(ModalTitle, {
      children: "Select Users (max 20)"
    }) : /*#__PURE__*/_jsx(Text, {
      style: {
        fontSize: 14,
        fontWeight: '600'
      },
      children: "Select Users (max 20)"
    }), /*#__PURE__*/_jsx(StyledInput, {
      placeholder: "Search users...",
      value: searchTerm,
      onChangeText: setSearchTerm,
      style: {
        width: '100%'
      }
    }), /*#__PURE__*/_jsx(ScrollableContainer, {
      style: {
        ...style
      },
      children: filteredUsers.map(user => /*#__PURE__*/_jsxs(UserItem, {
        onPress: () => handleUserSelect(user),
        style: {
          cursor: 'pointer'
        },
        children: [/*#__PURE__*/_jsx(Checkbox, {
          value: selectedUsers.some(u => u._id === user._id),
          onValueChange: () => handleUserSelect(user),
          disabled: selectedUsers.length === 20
        }), /*#__PURE__*/_jsx(View, {
          children: /*#__PURE__*/_jsx(Label, {
            children: `${user.firstName} ${user.lastName}`
          })
        })]
      }, user._id))
    })]
  });
};
export default UsersList;
//# sourceMappingURL=UsersList.js.map