import React from "react";
import { UserBtnStyled, UserModalStyled, UserModalListStyled } from "../PageTitle.style";

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

import { ReactComponent as Perfil } from "../../../assets/icons/UserModal/perfil.svg";
import { ReactComponent as Signoff } from "../../../assets/icons/UserModal/signoff.svg";
import ConfirmationModal from "../../ConfirmationModal/ConfirmationModal";
import UserModal from "../../UserModal/UserModal";

const UserBtn = ({ user, img, modal, modalSet }) => {
  const [modalConfirm, setModalConfirm] = React.useState(false);
  const { handleLogout } = React.useContext(AuthContext);

  const handleModal = () => {
    setModalConfirm(!modalConfirm);
  };

  return (
    <>
      <UserBtnStyled onClick={modalSet}>
        <img src={img} alt={user ? user.name : null} width="24px" />
        Bem Vindo, {user ? user.name : null}
      </UserBtnStyled>
      <UserModalStyled modal={modal}>
        <UserModalListStyled>
          <UserItem title="Perfil" icon={<Perfil />} />
          <UserItem title="Sair" icon={<Signoff />} onClick={handleModal} />
        </UserModalListStyled>
      </UserModalStyled>
      <UserModal />
      <ConfirmationModal title="Sair?" modal={modalConfirm} click={{ handleModal, handleLogout }}>
        Deseja Sair do sistema?
      </ConfirmationModal>
    </>
  );
};

export default UserBtn;