TabUIEffect.js

import React, { useEffect } from 'react';
import {
  useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState,
} from 'recoil';
import _ from 'lodash';
import { KEY_RECOIL } from '../../../../ConstantsV2/aiConstants';
import { DEVICE_TAB_TYPES } from '../StripsManagementV2/constants';
import {
  activeTabState,
  controlModalState,
  isActiveTabState,
  pickDateActionState,
  pickedBookmarkDateState,
  pickedEndDateState,
  pickedStartDateState,
  selectedStripState,
} from '../Recoil';
import { TPickDateAction } from '../Recoil/model';
import { controlHrSummaryModalState } from './recoilBeat';
import { deviceEventDataState, emptySelectedKeyState, eventStripsDataState } from './recoilStrips';

// Custom hook to handle date pick actions
const usePickDateAction = (keyRecoil, pickedStartDate, pickedEndDate, pickedBookmarkDate) => {
  const setPickDateAction = useSetRecoilState(pickDateActionState(keyRecoil));

  useEffect(() => {
    if (pickedStartDate && !pickedEndDate) {
      setPickDateAction(TPickDateAction.END);
    } else if (pickedStartDate && pickedEndDate) {
      setPickDateAction(TPickDateAction.NONE);
    } else if (!pickedStartDate && pickedEndDate) {
      setPickDateAction(TPickDateAction.NONE);
    }
  }, [pickedStartDate, pickedEndDate]);

  useEffect(() => {
    if (pickedBookmarkDate) {
      setPickDateAction(TPickDateAction.NONE);
    }
  }, [pickedBookmarkDate]);

  return setPickDateAction;
};

// Custom hook to handle modal reset when changing tab or strip
const useModalReset = (selectedStrip, controlModal, resetControlModal, resetControlHrSummaryModal, isActiveTab) => {
  useEffect(() => {
    if (!controlModal.isShowNewEvents && !controlModal.isShowAddNewEvent) {
      resetControlModal();
    }
  }, [selectedStrip]);

  useEffect(() => {
    if (!isActiveTab) {
      resetControlModal();
      resetControlHrSummaryModal();
    }
  }, [isActiveTab]);
};

// Base component to render the correct tab
const TabUIEffect = ({ keyRecoil, tab }) => {
  switch (tab) {
    case '1':
      return <TabBeatUIEffect keyRecoil={keyRecoil} />;
    case '2':
      return <TabECGEventUIEffect keyRecoil={keyRecoil} />;
    case '3':
      return <TabStripManagermentUIEffect keyRecoil={keyRecoil} />;
    case '4':
      return <TabTeamplatesUIEffect keyRecoil={keyRecoil} />;
    case '5':
      return <TabHRSummaryUIEffect keyRecoil={keyRecoil} />;
    default:
      return null;
  }
};

// TabBeatUIEffect component
const TabBeatUIEffect = ({ keyRecoil }) => {
  const [pickedStartDate, setPickedStartDate] = useRecoilState(pickedStartDateState(keyRecoil));
  const [pickedEndDate, setPickedEndDate] = useRecoilState(pickedEndDateState(keyRecoil));
  const [pickedBookmarkDate, setPickedBookmarkDate] = useRecoilState(pickedBookmarkDateState(keyRecoil));
  const controlModal = useRecoilValue(controlModalState(keyRecoil));
  const resetControlModal = useResetRecoilState(controlModalState(keyRecoil));
  const resetControlHrSummaryModal = useResetRecoilState(controlHrSummaryModalState);
  const selectedStrip = useRecoilValue(selectedStripState(keyRecoil));
  const isActiveTab = useRecoilValue(isActiveTabState(keyRecoil));

  // Handle pick date action updates
  const setPickDateAction = usePickDateAction(keyRecoil, pickedStartDate, pickedEndDate, pickedBookmarkDate);

  // Reset modal when strip or tab changes
  useModalReset(selectedStrip, controlModal, resetControlModal, resetControlHrSummaryModal, isActiveTab);

  useEffect(() => {
    if (Object.keys(controlModal).length > 1) {
      if (!(controlModal.isShowChangeDurationButtonType && controlModal.isShowAddNewEvent && controlModal.isShowAddEcgBookmark)) {
        setPickedStartDate(null);
        setPickedEndDate(null);
        setPickedBookmarkDate(null);
        setPickDateAction(TPickDateAction.NONE);
      }
      if (controlModal.isShowChangeDurationButtonType || controlModal.isShowAddNewEvent) {
        setPickDateAction(TPickDateAction.START);
      }
      if (controlModal.isShowAddEcgBookmark) {
        setPickDateAction(TPickDateAction.BOOKMARK);
      }
    }
  }, [controlModal]);

  return null;
};

// Other Tab Components (ECG, Strip Management, Templates, HR Summary) follow the same structure

// TabStripManagermentUIEffect component
const TabStripManagermentUIEffect = ({ keyRecoil }) => {
  const activeButton = useRecoilValue(activeTabState(keyRecoil));
  const eventStripsData = useRecoilValue(eventStripsDataState(keyRecoil));
  const deviceEventData = useRecoilValue(deviceEventDataState(keyRecoil));
  const setEmptySelectedKey = useSetRecoilState(emptySelectedKeyState(keyRecoil));
  const setEmptySelectedKeyDevice = useSetRecoilState(emptySelectedKeyState(keyRecoil));

  useEffect(() => {
    const isDeviceEvent = DEVICE_TAB_TYPES.includes(activeButton);
    const config = { isEmptyTab: false };
    if (isDeviceEvent) {
      const filteredData = _.filter(deviceEventData?.[activeButton], x => x.filterType === activeButton);
      _.assign(config, { isEmptyTab: _.isEmpty(filteredData) });
      setEmptySelectedKeyDevice(config);
    }
    if (_.isEmpty(eventStripsData)) {
      _.assign(config, { isEmptyAutoEvents: true });
    }
    setEmptySelectedKey(config);
  }, [activeButton, eventStripsData, deviceEventData]);

  return null;
};

export default TabUIEffect;