import React from 'react';
import {ScreenParams} from '../../navigation/app';
import {
  SavingsCategoryType,
  SuggestedPlansOptionsType,
} from '../../utils';
import {SavingsDetailType} from '../../utils/types';
import LockedSavingsForm from './LockedSavingsForm';
import FlexibleSavingsForm from './FlexibleSavingsForm';

type Props = {
  title: string;
  goBack: () => void;
  navigate: <T extends keyof ScreenParams>(
    name: T,
    params?: ScreenParams[T],
  ) => void;
  replace: <T extends keyof ScreenParams>(
    name: T,
    params?: ScreenParams[T],
  ) => void;
  savingsOption: SavingsCategoryType;
  suggestedPlan?: SuggestedPlansOptionsType | null;
  editMode?: boolean;
  existingSavingsData?: SavingsDetailType;
};

const OtherSavingsForm = (props: Props) => {
  const {savingsOption} = props;

  // Check if this is a locked savings category
  const isLockedCategory = savingsOption?.isLocked || false;

  // Route to the appropriate form component based on savings type
  if (isLockedCategory) {
    return <LockedSavingsForm {...props} />;
  } else {
    return <FlexibleSavingsForm {...props} />;
  }
};

export default OtherSavingsForm;