/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect } from "react";
import GridToolBarView from "./GridToolBarView";
import { SYSTEM_DEFAULT } from "../../constant";
import { BaseProps } from "../../Factory/BaseType";

import { ActionProps, ToolbarOptions } from "./type";
import { saveSystemDefaultInSession } from "./Components/ScreenView/helpers/saveSystemDefaultInSession";
import { useLocation, useNavigate } from "react-router-dom";
import { useEffectiveStyle } from "../../utils/useEffectiveStyle";

export type GridToolBarProps = BaseProps &
  ActionProps & {
    toolBarOptions: ToolbarOptions;
  };

const GridToolBar: React.FC<GridToolBarProps> = ({
  config,
  targetScreenDataField,
  uiElementGroupData,
  widgetStyle,
  toolBarOptions,
  loadTemplateSupportiveData,
  onExport,
  onExportDelete,
  onExportList,
  onExportDownload,
  onModelUpdate,
  onScreenDataLoad,
  getUniqueViewId,
  eventService,
}) => {
  const location = useLocation();
  const navigate = useNavigate();

  useEffectiveStyle(widgetStyle);

  const targetUiElementGroupId = location.state?.targetUiElementGroupId;

  const resultHandler = (response: any) => {
    onModelUpdate?.(null, targetScreenDataField ?? "", response);
  };

  const saveInSession = () => {
    if (
      uiElementGroupData?.userView?.selectedView?.id === SYSTEM_DEFAULT &&
      toolBarOptions.userView.enableDefaultSaveInSession
    ) {
      saveSystemDefaultInSession(
        config.uiElementGroupId,
        uiElementGroupData,
        toolBarOptions,
        getUniqueViewId,
      );
    }
  };

  useEffect(() => {
    onModelUpdate(null, config.uiElementGroupId, {
      ...uiElementGroupData,
      setting: {
        activeDataWidgetType: toolBarOptions.setting.activeDataWidgetType,
      },
    });
    const handleBeforeUnload = () => {
      saveInSession();
    };
    window.addEventListener("beforeunload", handleBeforeUnload);
    return () => {
      window.removeEventListener("beforeunload", handleBeforeUnload);
    };
  }, []);

  useEffect(() => {
    return () => {
      saveInSession();
    };
  }, [location.pathname]);

  useEffect(() => {
    if (
      location.state?.enableHotReload &&
      targetUiElementGroupId &&
      targetUiElementGroupId === config.uiElementGroupId
    ) {
      if (targetUiElementGroupId) {
        const rest = { ...location.state };
        delete rest.targetUiElementGroupId;
        delete rest.enableHotReload;
        navigate(`${location.pathname}${location.search}`, {
          state: rest,
          replace: true,
        });
      }
      onScreenDataLoad?.(resultHandler);
    }
  }, [targetUiElementGroupId]);

  useEffect(() => {
    if (
      uiElementGroupData?.enableDataLoading &&
      uiElementGroupData?.mountStatus !== "UNMOUNTED"
    ) {
      onScreenDataLoad?.(resultHandler);
    }
  }, [
    JSON.stringify(uiElementGroupData?.globalSearch?.appliedQuery),
    JSON.stringify(uiElementGroupData?.advancedSearch?.appliedQuery),
    JSON.stringify(uiElementGroupData?.quickFilter?.appliedQuery),
    JSON.stringify(uiElementGroupData?.groupedBy?.appliedGroups),
    JSON.stringify(uiElementGroupData?.pagination),
    JSON.stringify(uiElementGroupData?.sort),
    JSON.stringify(uiElementGroupData?.localSearch),
    uiElementGroupData?.enableDataLoading,
    uiElementGroupData?.needLoadData,
  ]);

  return (
    <GridToolBarView
      widgetStyle={widgetStyle}
      toolBarOptions={toolBarOptions}
      config={config}
      uiElementGroupData={uiElementGroupData}
      loadTemplateSupportiveData={loadTemplateSupportiveData}
      onModelUpdate={onModelUpdate}
      onExport={onExport}
      onExportDelete={onExportDelete}
      onExportList={onExportList}
      onExportDownload={onExportDownload}
      getUniqueViewId={getUniqueViewId}
      eventService={eventService}
    />
  );
};

export default GridToolBar;