import React, { useCallback, useEffect, useState } from "react";
import Divider from "@mui/material/Divider";
import { Button, Chip, IconButton, TextField } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import Avatar from "@mui/material/Avatar";
import {
  SelectedMembersChip,
} from "@/components/ChatModule/style";
import { useSelector } from "react-redux";
import { ChatSearchCommon } from "../../style";

const SearchUser = (props) => {
  interface User {
    id: number;
    name: string;
    avatarUrl: string;
  }

  const {
    selectedUsers,
    handleDeleteChip,
    handleClickChip,
    setSearchQuery,
    searchQuery,
  } = props;

  const { usersList } = useSelector((state: any) => state?.chatData);

  const handleChange = (event: any) => {
    // handleClickChip(newValue);

    setSearchQuery(event?.target?.value);
  };

  const handleRemoveUser = (userToDelete) => {
    handleDeleteChip(userToDelete);
  };

  return (
    <>
      <ChatSearchCommon>
            <TextField
              size="small"
              fullWidth
              id="standard-bare"
              variant="outlined"
              placeholder="Search People..."
              InputProps={{
                startAdornment: (
                  <IconButton>
                    <SearchIcon />
                  </IconButton>
                ),
              }}
              value={searchQuery}
              onChange={handleChange}
            />
          </ChatSearchCommon>
      <SelectedMembersChip>
        {selectedUsers?.map((user) => (
          <Chip
            size="small"
            label={user?.name}
            onClick={handleClickChip}
            onDelete={() => handleRemoveUser(user)}
            avatar={<Avatar alt={user?.name} src={user?.avatar_original} />}
          />
        ))}
      </SelectedMembersChip>
      <Divider />
    </>
  );
};

export default SearchUser;