dynamic-modal/src/hooks/use-enable-if.ts

The dynamic-modal is a solution of creation different modals into project using a json configuration file

'use client';

import { useState } from 'react';

import {
  IModalRenderAction,
  IModalRenderCondition,
  IModalRenderCriteria,
} from '../interfaces/modal';
import { liveDataHandler } from '../util/general/general.util';

export interface IRenderIfProps {
  elementEnableIf?: IModalRenderCondition;
}

const useEnableIf = ({ elementEnableIf }: IRenderIfProps) => {
  const [enable, setEnable] = useState<boolean>(() => {
    return elementEnableIf === undefined;
  });

  const checkEnable = async (
    formData: Record<string, unknown>,
    { name }: Record<'name', string> & Record<'type', string | undefined>,
  ) => {
    const targetFieldData = formData[name] as string | number;

    // if (
    //   targetFieldData === undefined ||
    //   targetFieldData === '' ||
    //   targetFieldData === null
    // )
    //   return false;

    const enableIfConfig = elementEnableIf;
    const isLiveEnable: boolean =
      !!enableIfConfig?.action && !!enableIfConfig.condition;

    if (isLiveEnable && enableIfConfig!.condition!.includes(name)) {
      const enableStatus: boolean = await liveDataHandler(
        targetFieldData,
        formData,
        (enableIfConfig as IModalRenderAction)!.action!,
      );

      return enableStatus;
    } else {
      const enableConditionList = Object.keys(
        elementEnableIf as IModalRenderCondition,
      );
      if (enableConditionList.includes(name)) {
        const enableStatus: boolean =
          (enableIfConfig as IModalRenderCriteria)[name]!.includes(
            targetFieldData,
          ) || (enableIfConfig as IModalRenderCriteria)[name]!.includes('*');

        return enableStatus;
      }
    }
  };

  return {
    enable,
    checkEnable,
    setEnable,
  };
};

export default useEnableIf;