import React from "react";
import { useLocation } from "react-router-dom";
import { PageTitleStyled } from "./PageTitle.style";

import UserBtn from "./UserBtn/UserBtn";

import { AuthContext } from "../../context/Auth/AuthContext";
import logo from "../../assets/images/Logo.png";

const PageTitle = () => {
  const path = useLocation();
  const [title, setTitle] = React.useState();
  const [modal, setModal] = React.useState(false);
  const { user } = React.useContext(AuthContext);

  React.useEffect(() => {
    switch (path.pathname) {
      case "/tickets":
        setTitle("Tickets");
        break;
      case "/contacts":
        setTitle("Contatos");
        break;
      case "/schedulesReminder":
        setTitle("Lembretes");
        break;
      case "/quickAnswers":
        setTitle("Respostas Rápidas");
        break;
      case "/users":
        setTitle("Usuários");
        break;
      case "/Queues":
        setTitle("Filas");
        break;
      case "/connections":
        setTitle("Conexões");
        break;
      case "/report":
        setTitle("Relatórios");
        break;
      case "/super":
        setTitle("Supervisão");
        break;
      case "/Settings":
        setTitle("Configurações");
        break;
      default:
        setTitle("Dashboard");
    }
  }, [path]);

  const handleModal = () => {
    setModal(!modal);
  };
  return (
    <PageTitleStyled>
      <h1>{title}</h1>
      <UserBtn user={user} img={logo} modal={modal} modalSet={handleModal} />
    </PageTitleStyled>
  );
};

export default PageTitle;