projeto-hit/frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx

import React from "react";

import TicketsManagerStyled from "./TicketsManager.style";
import TicketsTabs from "./TicketsTabs/TicketsTabs";
import TicketsList from "./TicketsList/TicketsList";
import NewTicketModal from "../../NewTicketModal";

import { AuthContext } from "../../../context/Auth/AuthContext";
import TicketSearch from "../TicketSearch/TicketSearch";

const TicketsManager = () => {
  const [valueTab, setValueTab] = React.useState("open");
  const [searchParam, setSearchParam] = React.useState("");

  const [newTicketModalOpen, setNewTicketModalOpen] = React.useState(false);
  const [showAllTickets, setShowAllTickets] = React.useState(false);
  const { user } = React.useContext(AuthContext);

  const userQueueIds = user.queues.map((q) => q.id);
  const [selectedQueueIds, setSelectedQueueIds] = React.useState(userQueueIds || []);

  let searchTimeout;
  const handleSearch = (e) => {
    const searchedTerm = e.target.value.toLowerCase();

    clearTimeout(searchTimeout);

    if (searchedTerm === "") {
      setSearchParam(searchedTerm);
      return;
    }

    searchTimeout = setTimeout(() => {
      setSearchParam(searchedTerm);
    }, 200);
  };

  React.useEffect(() => {
    if (user.profile.toUpperCase() === "ADMIN") {
      setShowAllTickets(true);
    }
  }, [user.profile]);
  return (
    <TicketsManagerStyled>
 
      <TicketsTabs setValueTab={setValueTab} valueTab={valueTab} />
      <TicketSearch handleSearch={handleSearch} setNewTicketModalOpen={setNewTicketModalOpen}/>
      <TicketsList
        showAll={showAllTickets}
        status={valueTab}
        selectedQueueIds={selectedQueueIds}
        searchParam={searchParam}
      />

      <NewTicketModal
        modalOpen={newTicketModalOpen}
        onClose={(e) => setNewTicketModalOpen(false)}
      />
    </TicketsManagerStyled>
  );
};

export default TicketsManager;