primereact/ tabview

import React, { useEffect, useRef, useState } from "react";
import { TabView, TabPanel } from "primereact/tabview";
import "primereact/resources/themes/saga-blue/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
import { useTabs } from "./context/TabContext";
import "./Tabs.css";
import { ConfirmDialog } from "primereact/confirmdialog";
import { Button } from "primereact/button";
import { Divider } from "primereact/divider";

export const Tabs = () => {
  const tabViewRef = useRef(null);
  const {
    tabs,
    activeIndex,
    setActiveIndex,
    removeTab,
    addTab,
    savedQueryList,
  } = useTabs();
  const [savedDialogVisible, setSavedDialogVisible] = useState(false);
  const [closeTabIndex, setCloseTabIndex] = useState(false);
  const [isElementCreated, setElementCreated] = useState(false);
  const handleChange = (e) => {
    e?.originalEvent?.preventDefault();
    e?.originalEvent?.stopPropagation();
    if (
      e?.originalEvent &&
      e?.originalEvent?.target &&
      !["PATH", "SVG"].includes(
        e?.originalEvent?.target?.tagName?.toUpperCase()
      )
    ) {
      setActiveIndex(e.index);
    }
  };

  const handleRemoveTab = (index) => {
    if (tabs[index].isModified) {
      if (tabs[index]?.code && closeTabIndex !== index) {
        setCloseTabIndex(index);
        setSavedDialogVisible(true);
        return false;
      }
    } else {
      return true;
    }
  };
  const onTabClose = (e) => {
    removeTab(e.index);
    tabViewRef.current.reset();
    setCloseTabIndex(false);
  };
  const onTabClosedBefore = (e) => {
    return handleRemoveTab(e.index);
  };
  const confirmSavedCloseHandler = () => {
    tabViewRef.current.props.onTabClose({ index: closeTabIndex });
  };
  const rejectSaveConfirm = () => {
    setSavedDialogVisible(false);
    setCloseTabIndex(false);
  };

  const headerTemplate = (options, tab, index) => {
    console.log("options===>", options, index);
    return (
      <div
        className={`flex align-items-center ${tabs.length - 1 === index && "w-13rem"}   forcheck  ${
          index == 0 || index == tabs.length ? "ml-3" : ""
        }`}
      >
        <div
          className={`flex pr-3 pl-1  py-2 ${
            options.selected && "activeTab"
          } align-items-center justify-content-center `}
          onClick={options.onClick} 
        >
          <i className={tab.isModified && "dot"}></i>
          <div className="mr-3 ml-2 text-lg font-semibold">{tab.header}</div>
          <i
            onClick={(e) => {
              e.stopPropagation();
              e.preventDefault();
              options.props.onTabClose({index:index});
            }}
            className="pi pi-times font-semibold scaleicon pr-2"
          ></i>
        </div>
        <Divider layout="vertical" align="center" className="px-0 mx-2  py-1 " />
        {tabs.length - 1 === index && (
          <i className="pi pi-plus ml-2 mr-2 font-semibold scaleicon" onClick={addTab}></i>
        )}
      </div>
    );
  };

  return (
    <div
      style={{
        border: "0px",
        borderStyle: "solid",
        borderColor: "lightblue",
        height: "100%",
      }}
    >
      <TabView
        ref={tabViewRef}
        renderActiveOnly={false}
        onTabClose={onTabClose}
        panelContainerClassName={"p-0"}
        activeIndex={activeIndex}
        onBeforeTabChange={(e) => {
          return true;
        }}
        onTabChange={(e) => {
          handleChange(e);
        }}
        onBeforeTabClose={onTabClosedBefore}
        scrollable 
      >
        {tabs.map((tab, index) => (
          <TabPanel
            leftIcon={tab.isModified && "dot"}
            closable
            key={tab.key}
            className="tabdiv"
            headerTemplate={(options) => headerTemplate(options, tab, index)}
          >
            {tab.content}
          </TabPanel>
        ))}
        {/* <button  */}
      </TabView>

      <ConfirmDialog
        visible={savedDialogVisible}
        onHide={() => {
          rejectSaveConfirm();
        }}
        message="Are you sure you want to Close this query? This action can not be undone!"
        header="Confirmation"
        icon="pi pi-exclamation-triangle"
        accept={confirmSavedCloseHandler}
        reject={() => rejectSaveConfirm}
      />
    </div>
  );
};