"use client";
import { GET_USER_LOGOUT_ROUTE, LOGOUT_USER_ROUTE } from "@/core/utils/routes";
import { useAuth } from "@/lib/contexts/auth";
import useRequest from "@/lib/hooks/useRequest";
import ModeEditIcon from "@mui/icons-material/ModeEdit";
import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
import VpnKeyIcon from "@mui/icons-material/VpnKey";
import { Box, Divider, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import ChangePassword from "./ChangePassword";

const ProfileActions = () => {
  const { getUser, logout } = useAuth();
  const requestServer = useRequest();
  const [openUpdate, setOpenUpdate] = useState(false);
  const [openChangePass, setOpenChangePass] = useState(false);

  const openUpdateProfile = () => {
    getUser();
    setOpenUpdate(true);
  };
  const handleLogout = () => {
    requestServer(GET_USER_LOGOUT_ROUTE, "post").then(() => {
      logout();
    });
  };

  return (
    <>
      <Box sx={{ display: "flex", justifyContent: "center" }}>
        <Tooltip title="ویرایش پروفایل" arrow>
          <IconButton
            aria-label="ویرایش پروفایل"
            color="success"
            onClick={openUpdateProfile}
          >
            <ModeEditIcon />
          </IconButton>
        </Tooltip>
        <Divider
          orientation="vertical"
          variant="middle"
          flexItem
          sx={{ mx: 1 }}
        />
        <Tooltip title="خروج" arrow>
          <IconButton onClick={handleLogout} aria-label="خروج" color="error">
            <PowerSettingsNewIcon />
          </IconButton>
        </Tooltip>
        <Divider
          orientation="vertical"
          variant="middle"
          flexItem
          sx={{ mx: 1 }}
        />
        <Tooltip title="تغییر رمز عبور" arrow>
          <IconButton
            aria-label="تغییر رمز عبور"
            color="primary"
            onClick={() => {
              setOpenChangePass(true);
            }}
          >
            <VpnKeyIcon />
          </IconButton>
        </Tooltip>
      </Box>
      {/* <Update open={openUpdate} setOpen={setOpenUpdate} /> */}
      <ChangePassword open={openChangePass} setOpen={setOpenChangePass} />
    </>
  );
};
export default ProfileActions;