import React from "react";
import Image from "../../Components/Ui/Image";
import SearchField from "../../Components/DataTable/SearchFieldWithSelect";
import { usePage_titleState } from "../../zustand/PageTitleState";
import { MdOutlineArrowForwardIos } from "react-icons/md";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { search_array } from "../../Routes";
import { BRANCH_OBJECT_KEY, USER_KEY } from "../../config/AppKey";
import { useTranslation } from "react-i18next";
import { translateOptions } from "../../utils/translatedOptions";
import { ParamsEnum } from "../../enums/params";
import { Tooltip } from "antd";
import useModalHandler from "../../utils/useModalHandler";
import { ModalEnum } from "../../enums/Model";
import ChangePasswordModel from "./model/AddModel";
import { getLocalStorage } from "../../utils/LocalStorage";
import { getPrevPathRoute } from "../../utils/getPrevPathRoute";
import { deletePathSegments } from "../../utils/deletePathSegments";
const NavBar = () => {
  const { Page_title } = usePage_titleState((state) => state);
  const userData = getLocalStorage(USER_KEY);

  const [t] = useTranslation();
  const location = useLocation();

  const translateArray = translateOptions(search_array, t);
  const navigate = useNavigate();
  const PrevPath = getPrevPathRoute(location.pathname);

  const handelNavigate = () => {
    if (PrevPath === 0) {
      return 0;
    }
    navigate(deletePathSegments(location.pathname, PrevPath));
  };

  const { handel_open_model } = useModalHandler();
  const handleEdit = (record: any) => {
    handel_open_model(ModalEnum?.CHANGE_PASSWORD);
  };

  return (
    <div className="NavBar">
      <span className="navbar_link" onClick={handelNavigate}>
        <MdOutlineArrowForwardIos /> {Page_title}
      </span>
      <article>
        <div className="header_search">
          {/* <NavBarSelect /> */}

          <SearchField
            options={translateArray}
            placeholder={t("practical.search_here")}
          />
        </div>
        <span className="header_icons">
          <div>
            <Image src="/Icon/bell.png" />
          </div>
          <Tooltip
            placement="top"
            title={
              <div onClick={handleEdit}>
                {" "}
                {t("header.change_your_current_password")}{" "}
              </div>
            }
            color="#E0E0E0"
          >
            <div className="gear">
              <Image src="/Icon/gear.png" />
            </div>
          </Tooltip>
        </span>
        <div className="header_profile">
          <span>
            <h6>{userData?.username}</h6>
            <p>{userData?.type}</p>
          </span>
          <Image src="/Layout/DefultStudentImage.png" />
        </div>
      </article>
      <ChangePasswordModel />
    </div>
  );
};

export default NavBar;
