import React from 'react';
import {StatusBar} from 'react-native';
import {ScreenParams} from '../navigation/app';
import {Colors} from '../utils';
import SaveAsYouCollectForm from '../components/Form/saveAsYouCollectForm';
import OtherSavingsForm from '../components/Form/otherSavingsForm';

type Props = {
  navigate: <T extends keyof ScreenParams>(
    name: T,
    params?: ScreenParams[T],
  ) => void;
  replace: <T extends keyof ScreenParams>(
    name: T,
    params?: ScreenParams[T],
  ) => void;
  goBack: () => void;
  params: ScreenParams['savingsForm'];
};

const SavingsForm = ({params, navigate, replace, goBack}: Props) => {
  return (
    <>
      <StatusBar
        backgroundColor={Colors.white}
        barStyle={'dark-content'}
        animated={false}
      />
      {params.savingsOption.id === 3 ? (
        <SaveAsYouCollectForm
          title={params.editMode ? 'Edit Savings' : `${params.savingsOption.name} Savings`}
          goBack={goBack}
          navigate={navigate}
          savingsOption={params.savingsOption}
          suggestedPlan={params?.suggestedPlan}
        />
      ) : (
        <OtherSavingsForm
          title={params.editMode ? `Edit ${params.savingsOption.name} Savings` : `${params.savingsOption.name} Savings`}
          goBack={goBack}
          navigate={navigate}
          replace={replace}
          savingsOption={params.savingsOption}
          suggestedPlan={params?.suggestedPlan}
          editMode={params?.editMode}
          existingSavingsData={params?.existingSavingsData}
        />
      )}
    </>
  );
};

export default SavingsForm;