import React from "react";
import { getLocalStorage } from "../../../utils/LocalStorage";
import { USER_KEY } from "../../../config/AppKey";
import { translateOptions } from "../../../utils/translatedOptions";
import { search_array } from "../../../Routes";
import { useTranslation } from "react-i18next";
import SearchFieldWithSelect from "../../DataTable/SearchFieldWithSelect";
import { Tooltip } from "antd";
import useModalHandler from "../../../utils/useModalHandler";
import { ModalEnum } from "../../../enums/Model";
import Image from "../../Ui/Image";
const NavBarRightSide = () => {
  const userData = getLocalStorage(USER_KEY);
  const [t] = useTranslation();
  const translateArray = translateOptions(search_array, t);

  const { handel_open_model } = useModalHandler();
  const handleEdit = () => {
    handel_open_model(ModalEnum.CHANGE_PASSWORD);
  };
  return (
    <article>
      <div className="header_search">
        <SearchFieldWithSelect
          options={translateArray}
          placeholder={t("practical.search_here")}
        />
      </div>
      <span className="header_icons">
        <div>
          <Image src="/Icon/bell.png" alt="Notifications" />
        </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" alt="Settings" />
          </div>
        </Tooltip>
      </span>
      <div className="header_profile">
        <span>
          <h6>{userData?.username}</h6>
          <p>{userData?.type}</p>
        </span>
        <Image src="/Layout/DefaultStudentImage.png" alt="Profile" />
      </div>
    </article>
  );
};

export default NavBarRightSide;
