import React from "react";
import SearchBar from "../../Components/Ui/SearchBar/SearchBar";
import { Button } from "antd";
import { BsPlusCircleFill } from "react-icons/bs";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import useModalHandler from "../../utils/useModalHandler";
import { MdOutlineArrowForwardIos } from "react-icons/md";
import { deletePathSegments } from "../../utils/deletePathSegments";
import { getPrevPathRoute } from "../../utils/getPrevPathRoute";
import { usePageTitleState } from "../../zustand/PageTitleState";
import FillterForm from "../Ui/FillterForm";

const PageHeader = ({
  canAdd,
  ModelAbility,
  pageTitle,
  openModel = true,
  locationToNavigate,
}: {
  canAdd: any;
  ModelAbility: any;
  pageTitle: string;
  openModel?: boolean;
  locationToNavigate?: string | any;
}) => {
  const navigate = useNavigate();
  const { handel_open_model } = useModalHandler();
  const { t } = useTranslation();

  const PrevPath = getPrevPathRoute(location.pathname);
  const handelNavigate = () => {
    if (PrevPath === 0) {
      return;
    }
    navigate(deletePathSegments(location.pathname, PrevPath));
  };
  const handleNavigateToPage = (location: string) => {
    navigate(location);
  };
  console.log();
  const {PageTitle} = usePageTitleState()
  return (
    <div className="page_header">
      <header className="d-flex justify-content-between">
        <span className="page_header_links" onClick={handelNavigate}>
          <h1 className="page_title">{t(`PageTitle.${pageTitle}`)}</h1>
          <span className="page_links">
            <MdOutlineArrowForwardIos /> {PageTitle}
          </span>
        </span>
        {canAdd && (
          <div className="Selects">
            <button
              onClick={() =>
                openModel
                  ? handel_open_model(ModelAbility)
                  : handleNavigateToPage(locationToNavigate)
              }
              className="add_button"
            >
              <BsPlusCircleFill />
              {t(`practical.add`)}
            </button>
          </div>
        )}
      </header>
    </div>
  );
};

export default PageHeader;