Untitled

import React, { useEffect, useState } from "react";
import {
  ExpansionPanel,
  ExpansionPanelContent,
  ExpansionPanelActionEvent,
} from "@progress/kendo-react-layout";
import { Reveal } from "@progress/kendo-react-animation";
import { Switch, NumericTextBox } from "@progress/kendo-react-inputs";
import { Tooltip } from "@progress/kendo-react-tooltip";
import ApiHelper from "../../../helper/api-helper";
import Loading from "../../../control-components/loader/loader";
import { useDispatch, useSelector } from "react-redux";
import { NotificationManager } from "react-notifications";
import { Encrption } from "../../encrption";
import { renderErrors } from "src/helper/error-message-helper";
import { permissionEnum } from "../../../helper/permission-helper";
import { saveStaffPermissions } from "src/redux/actions";
import { STAFF_LOGIN_DETAIL } from "src/redux/actions/types";
import { API_ENDPOINTS } from "src/services/api-endpoints";
import { userIsSuperAdmin } from "../../../helper/permission-helper";
import DatePickerKendoRct from "../../../control-components/date-picker/date-picker";
import calenderIcon from "../../../assets/images/calendar-03.png"
interface Setting {
  key: number;
  name: string;
  label: string;
  info?: string;
  permission?: boolean;
  value: any;
  tempDate? : Date;
}

interface Module {
  id: number;
  moduleName: string;
  settings: Setting[];
}

interface StaffSettingProps {
  staffId: number;
}

const StaffSetting: React.FC<StaffSettingProps> = ({ staffId }) => {
  const dispatch = useDispatch();
  const [loading, setLoading] = useState(false);
  const [expanded, setExpanded] = useState({});
  const [tempAccessDocuments, setTempAccessDocuments] = useState(false);
  const [settingSwitch, setSettingSwitch] = useState([]);
  const staffLoginInfo = useSelector((state: any) => state?.getStaffReducer);
  const userAccessPermission = useSelector(
    (state: any) => state.userAccessPermission
  );

  useEffect(() => {
    getStaffSettingList();
  }, []);

  const getStaffSettingList = () => {
    setLoading(true);
    const id = Encrption(staffId);
    ApiHelper.getRequest(API_ENDPOINTS.GET_STAFF_SETTING + id)
      .then((result) => {
        setTempAccessDocuments(result.resultData.isTempAccessAllowInPastDocuments);
        const data: any = transformData(result.resultData);
        setSettingSwitch(data);
        const initialExpanded = data.reduce(
          (acc: { [id: number]: boolean }, cur: any) => ({
            ...acc,
            [cur.id]: true,
          }),
          {}
        );
        setExpanded(initialExpanded);
        setLoading(false);
      })
      .catch((error) => {
        renderErrors(error.message);
        setLoading(false);
      });
  };

  const transformData = (data: any): Module[] => {
    return [
      {
        id: 1,
        moduleName: "BILLING",
        settings: [
          {
            key: 1,
            info: "Grants staff the ability to submit claims, view billing amounts, and modify billing statuses.",
            name: "isBillingManager",
            label: "Billing/Claims Manager",
            value: data.isBillingManager,
            permission: userIsSuperAdmin(staffLoginInfo.roleId) ? false : true,
          },
          {
            key: 2,
            name: "canModifyBillingStatus",
            info: "This setting allows a staff member to change the billing status of submitted documents.",
            label: "Can Modify Billing Status",
            value: data.canModifyBillingStatus,
            permission: userIsSuperAdmin(staffLoginInfo.roleId) ? false : true,
          },
          {
            key: 3,
            name: "showBillingAmounts",
            info: "Allows staff to view billing amounts but does not grant access to submit claims or view billing status.",
            label: "View Billing Amount",
            value: data.showBillingAmounts,
            permission: userIsSuperAdmin(staffLoginInfo.roleId) ? false : true,
          },
        ],
      },
      {
        id: 2,
        moduleName: "CLIENT",
        settings: [
          {
            key: 4,
            name: "allowEligibilityChecks",
            info: "Enables staff to perform eligibility checks on their clients.",
            label: "Allow Eligibility Checks",
            value: data.allowEligibilityChecks,
            permission: userIsSuperAdmin(staffLoginInfo.roleId) ? false : true,
          },
          {
            key: 5,
            name: "canSeeAllClients",
            info: "This setting allows staff without caseloads to view all clients in the system.",
            label: "Can See All Clients if No Caseload Assigned",
            value: data.canSeeAllClients,
            permission: userAccessPermission[
              permissionEnum.MANAGE_STAFF_SETTINGS
            ]
              ? false
              : true,
          },
          {
            key: 6,
            name: "canSeeAllClientsWithCaseload",
            info: "When selected, this setting allows staff with an assigned caseload to view all clients in the system.",
            label: "With Caseload, Show All Clients",
            value: data.canSeeAllClientsWithCaseload,
            permission: userAccessPermission[
              permissionEnum.MANAGE_STAFF_SETTINGS
            ]
              ? false
              : true,
          },
        ],
      },
      {
        id: 3,
        moduleName: "DOCUMENTS",
        settings: [
          {
            key: 7,
            name: "allowDocumentTranscription",
            info: "This setting permits a staff member to submit documentation on behalf of other staff.",
            label: "Allow Document Transcription",
            value: data.allowDocumentTranscription,
            permission: userIsSuperAdmin(staffLoginInfo.roleId) ? false : true,
          },
          {
            key: 8,
            name: "canAddViewOtherStaffDocumentation",
            info: "This allows staff to access the Staff Documentation for other staff.",
            label: "Can Add And View Other Staff Documentation",
            value: data.canAddViewOtherStaffDocumentation,
            permission: userIsSuperAdmin(staffLoginInfo.roleId) ? false : true,
          },
          {
            key: 9,
            name: "canReviewDocuments",
            info: "Staff with this setting can review documents submitted by other staff members.",
            label: "Can Review Documents",
            value: data.canReviewDocuments,
            permission: userAccessPermission[
              permissionEnum.MANAGE_STAFF_SETTINGS
            ]
              ? false
              : true,
          },
          {
            key: 10,
            name: "canSealDocuments",
            info: "This setting allows a staff member to seal documents, preventing further edits.",
            label: "Can Seal Documents",
            value: data.canSealDocuments,
            permission: userAccessPermission[
              permissionEnum.MANAGE_STAFF_SETTINGS
            ]
              ? false
              : true,
          },
          {
            key: 11,
            name: "isTempAccessAllowInPastDocuments",
            info: "Enable temporary access to create documents in the past with a specific start date.",
            label: "Allow Temporary Access for Past Documents",
            value: data.isTempAccessAllowInPastDocuments,
            permission: userAccessPermission[
              permissionEnum.MANAGE_STAFF_SETTINGS
            ]
              ? false
              : true,
          },
          {
            key: 12,
            name: "pastAllowedDays",
            info: "This staff-specific setting determines how many days into the past a staff member can create a new document, with '0' as the default.",
            label: "# of Days Allowed in Past to Create New Document",
            value: data.pastAllowedDays,
          },
          {
            key: 13,
            name: "tempAccessDate",
            info: "",
            label: "Temp Access Date",
            value: data.tempAccessDate ? new Date(data.tempAccessDate) : null,
          },
        ],
      },
      {
        id: 4,
        moduleName: "MISCELLANEOUS",
        settings: [
          {
            key: 14,
            name: "canManageReports",
            label: "Can Manage Reports",
            value: data.canManageReports,
            permission: userIsSuperAdmin(staffLoginInfo.roleId) ? false : true,
          },
          {
            key: 15,
            name: "canModifyClinicRoles",
            info: "Staff with this setting can view the role setup under 'More.",
            label: "Can See Clinic Access Roles and Permissions",
            value: data.canModifyClinicRoles,
            permission: userAccessPermission[
              permissionEnum.MANAGE_STAFF_SETTINGS
            ]
              ? false
              : true,
          },
          {
            key: 16,
            name: "isHumanResourcesManager",
            info: "This setting grants staff access to pay rates, staff documentation reviews, and other HR-related functions.",
            label: "Human Resources (HR) Management",
            value: data.isHumanResourcesManager,
            permission: userIsSuperAdmin(staffLoginInfo.roleId) ? false : true,
          },
        ],
      },
    ];
  };

  const handleSwitchChange = (key: any, value: any) => {
    if (key === 11) {
      setTempAccessDocuments(value);
    }
    setSettingSwitch((prev: any) =>
      prev.map((module: any) => ({
        ...module,
        settings: module.settings.map((setting: Setting) =>
          setting.key === key ? { ...setting, value } : setting
        ),
      }))
    );
  };

  const handleUpdate = () => {
    setLoading(true);
    const updatedSettings = settingSwitch.reduce(
      (acc, module: any) => ({
        ...acc,
        ...module.settings.reduce(
          (settingsAcc: any, setting: any) => ({
            ...settingsAcc,
            [setting.name]: setting.value,
          }),
          {}
        ),
      }),
      {}
    );

    const data: any = { staffId: staffId, ...updatedSettings };

    ApiHelper.postRequest(API_ENDPOINTS.ADD_STAFF_SETTING, data)
      .then((result) => {
        setLoading(false);
        NotificationManager.success("Updated General successfully");
        if (staffId === staffLoginInfo.id) {
          dispatch(saveStaffPermissions(data));
          dispatch({
            type: STAFF_LOGIN_DETAIL,
            payload: {
              ...staffLoginInfo,
              canReviewDocuments: data.canReviewDocuments,
            },
          });
        }
      })
      .catch((error) => {
        renderErrors(error.message);
      });
  };

  const onAction = (id: number) => {
    setExpanded((prevExpanded) => ({
      ...prevExpanded,
      [id]: !prevExpanded[id],
    }));
  };

  const shouldRenderSetting = (setting: Setting) => {
    if (setting.key === 12 || setting.key === 13) {
      return tempAccessDocuments;
    }
    return true;
  };

  const renderSettingControl = (setting: Setting) => {
    if (setting.key === 12 && tempAccessDocuments) {
      return (
        <div className="position-relative" style={{ marginLeft: "35px", maxWidth: "200px"}}>
          <NumericTextBox
            name="pastAllowedDays"
            value={setting.value}
            onChange={(e) => handleSwitchChange(setting.key, e.value)}
            className="input-control-up"
            spinners={false}
          />
        </div>
      );
    } else if (setting.key === 13 && tempAccessDocuments) {
      return (
        <div className="position-relative" style={{ marginLeft: "35px", maxWidth: "200px" }}>
          <DatePickerKendoRct 
            validityStyles={false}
            value={setting.value && new Date(setting.value)}
            onChange={(e) => handleSwitchChange(setting.key, e.value)}
            name="tempAccessDate"
            label=""
          />
          <img src={calenderIcon} className="blueThemeIcons date-icon-doc-setting" alt="calender"/>
        </div>
      );
    } else if (setting.key !== 12 && setting.key !== 13) {
      return (
        <Switch
          checked={setting.value}
          disabled={setting.permission}
          onChange={(e) => handleSwitchChange(setting.key, e.value)}
        />
      );
    }
    return null;
  };

  return (
    <div className="col-12 mt-5 staffSetting-section blue_theme">
      {loading && <Loading />}

      {settingSwitch.map((module: any) => (
        <ExpansionPanel
          title={module.moduleName}
          expanded={expanded[module.id]}
          tabIndex={0}
          key={module.id}
          onAction={() => onAction(module.id)}
        >
          <Reveal className="z-index-100">
            {expanded[module.id] && (
              <ExpansionPanelContent>
                {module.settings.map((setting: Setting, index: any) => (
                  shouldRenderSetting(setting) && (
                    <div
                      key={index}
                      style={{
                        display: "flex",
                        alignItems: "center",
                        marginBottom: "20px",
                      }}
                    >
                      {renderSettingControl(setting)}

                      <span className="switch-title-text fw-500 f-16 mx-2">
                        <span>{setting.label}</span>
                      </span>
                      
                      {setting.key !== 14 && setting.key !== 13 && setting.info && (
                        <Tooltip
                          anchorElement="target"
                          style={{
                            maxWidth: "200px",
                            whiteSpace: "normal",
                            wordWrap: "break-word",
                            overflowWrap: "break-word",
                          }}
                        >
                          <i
                            style={{ cursor: "pointer" }}
                            title={setting.info}
                            className="fa fa-info-circle info-icon position-relative info_tooltip"
                          />
                        </Tooltip>
                      )}
                    </div>
                  )
                ))}
              </ExpansionPanelContent>
            )}
          </Reveal>
        </ExpansionPanel>
      ))}

      {userAccessPermission[permissionEnum.MANAGE_STAFF_SETTINGS] && (
        <div className="col-12 border-top pt-2">
          <button className="cancelBtn px-2 m-0" onClick={handleUpdate}>
            <i className="fa fa-check mr-2" title="Print"></i>
            Update
          </button>
        </div>
      )}
    </div>
  );
};

export default StaffSetting;