address-verification-app/src/screens/Dashboard/AnomalyTracker/Forms.tsx/EtaForm.tsx

import React from 'react';
import { View, StyleSheet, SafeAreaView, ScrollView, ActivityIndicator } from 'react-native';
import NavigationHeader, { Icon } from '@rn-ui-lib/components/NavigationHeader';
import { GenericStyles } from '@rn-ui-lib/styles';
import { goBack, navigateToScreen } from '@components/utlis/navigationUtlis';
import Button from '@rn-ui-lib/components/Button';
import { useForm } from 'react-hook-form';
import FormInput from '@common/FormInput';
import { AnswerType } from '@components/form/interface';
import { useAppDispatch, useAppSelector } from '@hooks';
import { getAnomalyDetails, updateAnomaly } from '../AnomalyTrackerActions';
import { CaseDetailStackEnum } from '@screens/caseDetails/CaseDetailStack';
import { PageRouteEnum } from '@screens/auth/ProtectedRouter';
import { toast } from '@rn-ui-lib/components/toast';
import { dateFormat, ISO_DATE_FORMAT } from '@rn-ui-lib/utils/dates';
import { COLORS } from '@rn-ui-lib/colors';
import { AnomalyType, VALIDATION_ERROR_MESSAGES } from '../constants';
import { IEtaFormData } from '../interfaces';
import { getLastDateOfNextMonth } from './utils';

interface IEtaForm {
  route: {
    params: {
      selectedAnomalyId: string;
    };
  };
}
const EtaForm = (props: IEtaForm) => {
  const { selectedAnomalyId } = props.route.params || {};
  const showLoader = useAppSelector((state) => state?.anomalyTracker?.updatingForm);
  const dispatch = useAppDispatch();
  const {
    control,
    reset,
    formState: { isValid },
    handleSubmit,
  } = useForm<IEtaFormData>({
    defaultValues: {
      at: '',
      reason: '',
    },
    mode: 'onBlur',
  });
  const successCallback = () => {
    reset();
    toast({
      text1: 'ETA submitted successfully',
      type: 'success',
    });
    dispatch(getAnomalyDetails(AnomalyType.OPEN, true));
    navigateToScreen(PageRouteEnum.CASE_DETAIL_STACK, {
      screen: CaseDetailStackEnum.ANOMALY_TRACKER,
    });
  };
  const submitETA = (data: IEtaFormData) => {
    dispatch(updateAnomaly(selectedAnomalyId, { eta: data }, successCallback));
  };

  const maxDate = dateFormat(getLastDateOfNextMonth(), ISO_DATE_FORMAT);

  return (
    <SafeAreaView style={[GenericStyles.fill]}>
      <NavigationHeader
        title="Submit ETA"
        titleStyle={styles.header}
        onBack={goBack}
        icon={Icon.close}
      />
      {showLoader ? (
        <View style={[GenericStyles.fill, GenericStyles.centerAlignedRow]}>
          <ActivityIndicator size="large" color={COLORS.BASE.BLUE} />
        </View>
      ) : (
        <View style={[GenericStyles.fill, GenericStyles.justifyContentFlexEnd]}>
          <ScrollView
            contentContainerStyle={[GenericStyles.fill, GenericStyles.justifyContentFlexEnd]}
          >
            <View style={GenericStyles.mb20}>
              <FormInput
                control={control}
                question={{
                  text: 'Select Date',
                  type: AnswerType.date,
                }}
                name="at"
                isQuestionMandatory={true}
                placeholder="Select date"
                maxDate={maxDate}
                rules={{
                  required: {
                    value: true,
                    message: VALIDATION_ERROR_MESSAGES.DATE,
                  },
                }}
              />
              <FormInput
                control={control}
                question={{
                  text: 'Enter reason',
                  type: AnswerType.text,
                }}
                name="reason"
                isQuestionMandatory={true}
                placeholder="Enter reason"
                rules={{
                  required: {
                    value: true,
                    message: VALIDATION_ERROR_MESSAGES.REASON_REQUIRED,
                  },
                  minLength: {
                    value: 20,
                    message: VALIDATION_ERROR_MESSAGES.MIN_LENGTH,
                  },
                }}
              />
            </View>
          </ScrollView>
          <View
            style={[
              GenericStyles.row,
              GenericStyles.alignCenter,
              GenericStyles.spaceBetween,
              GenericStyles.elevation10,
              GenericStyles.p16,
              GenericStyles.whiteBackground,
            ]}
          >
            <Button
              title={'Submit'}
              style={[GenericStyles.w100]}
              disabled={!isValid}
              showLoader={false}
              onPress={handleSubmit(submitETA)}
            />
          </View>
        </View>
      )}
    </SafeAreaView>
  );
};
export const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'flex-end',
    borderTopColor: COLORS.BORDER.PRIMARY,
    borderBottomColor: COLORS.BORDER.PRIMARY,
  },
  header: { fontSize: 16, fontWeight: '600' },
});
export default EtaForm;