EvoCalculator/src/client/hooks/Calculation/useValidation.ts

/* eslint-disable react-hooks/exhaustive-deps */
import { TableNames, TableValuesNames } from './../../../core/types/tables';
import { ValidateStatus } from 'antd/lib/form/FormItem';
import { INVALID_INPUT as INVALID_INPUT_MESSAGE } from 'core/constants/errorMessages';
import { ElementsNames } from 'core/types/elements';
import { useEffect, useState } from 'react';
import { useStores } from '../useStores';

type TValidation = { errorMessage: string; validator: Function };
interface IUseValidationArgs {
  elementName: ElementsNames;
  value: any;
  validation: TValidation;
}

interface IUseTableValidationArgs {
  tableName: TableNames;
  rowIndex: number;
  propName: TableValuesNames;
  value: any;
  validation: TValidation;
}

export const useValidation = ({
  elementName,
  value,
  validation,
}: IUseValidationArgs) => {
  const { validator, errorMessage } = validation || {
    validator: undefined,
    errorMessage: undefined,
  };
  const [isValid, setValidation] = useState<boolean | undefined>(undefined);
  const { calculationStore } = useStores();

  // inject value from store
  const validationStatus = calculationStore.validations[elementName];
  useEffect(() => {
    setValidation(validationStatus);
  }, [validationStatus]);

  // inner validation && set validation status to store
  useEffect(() => {
    if (value === undefined || value === '') {
      calculationStore.setValidation(elementName, undefined);
    } else {
      if (validator) {
        let validationResult = validator(value);
        calculationStore.setValidation(elementName, validationResult);
      }
    }
  }, [value]);

  const getValidateStatus = (): ValidateStatus | undefined => {
    if (isValid === undefined) {
      return undefined;
    }
    return isValid === false ? 'error' : 'success';
  };

  const getMessage = (): string | undefined => {
    if (isValid === false) {
      return errorMessage || INVALID_INPUT_MESSAGE;
    }
  };

  return {
    isValid,
    validateStatus: getValidateStatus(),
    message: getMessage(),
  };
};

export const useTableValidation = ({
  tableName,
  rowIndex,
  propName,
  value,
  validation,
}: IUseTableValidationArgs) => {
  const { validator, errorMessage } = validation || {
    validator: undefined,
    errorMessage: undefined,
  };
  const [isValid, setValidation] = useState<boolean | undefined>(undefined);
  const { calculationStore } = useStores();

  const validationStatus =
    calculationStore.tables[tableName].rows[rowIndex][propName]?.validation;
  useEffect(() => {
    setValidation(validationStatus);
  }, [validationStatus]);

  useEffect(() => {
    if (value === undefined || value === '') {
      calculationStore.setTableRows(
        tableName,
        rowIndex,
      )([
        {
          [propName]: {
            validation: undefined,
          },
        },
      ]);
    } else {
      if (validator) {
        let validationResult = validator(value);
        calculationStore.setTableRows(
          tableName,
          rowIndex,
        )([
          {
            [propName]: {
              validation: validationResult,
            },
          },
        ]);
      }
    }
  }, [value]);

  const getValidateStatus = (): ValidateStatus | undefined => {
    if (isValid === undefined) {
      return undefined;
    }
    return isValid === false ? 'error' : 'success';
  };

  const getMessage = (): string | undefined => {
    if (isValid === false) {
      return errorMessage || INVALID_INPUT_MESSAGE;
    }
  };

  return {
    isValid,
    validateStatus: getValidateStatus(),
    message: getMessage(),
  };
};