import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {FormProvider} from 'react-hook-form';
import {InputSelect, Spinner} from '@components';
import {MakeRequestScrollContentProps} from '@modules/timeOff/screens/MakeRequest/hooks';
import {isIos} from '@shared/utils';

import {styles} from '../../styles';

import MakeRequestSk from '../MakeRequestSk';
import SubmitRequestErrorMessages from '../SubmitRequestErrorMessages';
import {IssuerBanner} from '../IssuerBanner';
import {MakeRequestFormBody} from '../MakeRequestFormBody';
import {InfoMessages} from '../InfoMessages';

export function MakeRequestScrollContent({
  params,
  methods,
  policyType,
  panelStyle,
  submitError,
  isFormVisible,
  formBodyProps,
  isSkeletonVisible,
  policyTypesOptions,
  onChangePolicyType,
  isRequestingPreview,
  previewSectionProps,
  activeRequestErrors,
  isPolicySelectDisabled,
}: MakeRequestScrollContentProps) {
  const {t} = useTranslation();

  return (
    <>
      {params?.issuer && (
        <IssuerBanner issuer={params.issuer} panelStyle={panelStyle} />
      )}
      <FormProvider {...methods}>
        <View style={panelStyle}>
          <InputSelect
            value={policyType?.id}
            options={policyTypesOptions}
            enableDynamicSizing={!isIos}
            onChange={onChangePolicyType}
            disabled={isPolicySelectDisabled}
            showAvatarInCollapsedInput={false}
            label={t('time_off.what_request_type')}
            menuTitle={t('time_off.what_request_type')}
            placeholder={t('time_off.request_type', {count: 1})}
          />
        </View>
        {isSkeletonVisible && <MakeRequestSk />}
        {isFormVisible && formBodyProps && (
          <MakeRequestFormBody {...formBodyProps} />
        )}
      </FormProvider>
      {isRequestingPreview && !isSkeletonVisible && (
        <View style={[panelStyle, styles.spinnerContainer]}>
          <Spinner />
        </View>
      )}
      {previewSectionProps && <InfoMessages {...previewSectionProps} />}
      <SubmitRequestErrorMessages
        submitError={submitError}
        errors={activeRequestErrors}
        minimumTimeFraction={policyType?.minimumTimeFraction}
      />
    </>
  );
}